Mein Tablet Ui ist total durcheinander

Wasserwerk33 · 03 Januar 2018, 18:30:57

Hallo Leute.

Wo ist mein Fehler? ich finde ihn einfach nicht. Ich habe alles durcheinander wenn ich "LOL" mit reinnehme. Wieso??
Sieht vielleicht einer meinen Fehler? Bin schon den ganzen nachmittag dabei. Finde ihn nicht.

danke schon mal

Code Auswählen

!DOCTYPE html>
<html>
   <head>
      <!--
         /* FHEM tablet ui */
         /*
         * main page
         *
         load this page via widget pagebutton
         
         <div data-type="pagebutton" 
         data-url="#content_main.html"     
         data-load="#content_main" 
         data-off-background-color="transparent" 
         data-off-color="#606060" data-on-background-color="#606060" 
         data-on-color="#222222" 
         data-active-pattern="(.*/||.*#content_main.html)" 
         data-icon="fa-home" 
         class="default top-space"></div>
         -->
   </head>
   <body>
      <div class="page" id="content_main">
         <div class="gridster">
            <ul>


     <li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="5" data-sizey="5">
  <div class="container"><header>Internetradio</header>
   <div class="container">
      <div class="left">
         <div data-type="select" 
            data-device="WLan_Radio" 
            data-list="STREAMS" 
            data-get="STREAM" 
            data-set="PLAY" 
            class="cell">
	 </div>
         <div data-type="switch" 
            data-device="WLan_Radio" 
            data-set-on="PLAY" 
            data-set-off="STOP" 
            data-get-on="playing" 
            data-get-off="stopped" 
            data-icon="fa-music" 
            data-on-color="white" 
            data-on-background-color="green"
	    data-off-color="white"
 	    data-Off-background-color="#FF0000"
            class="cell">
	  </div>
        </div>
      <div class="right">
         <marquee><div 
               data-type="label" 
               data-device="WLan_Radio" 
               data-get="StreamTitle"
               data-color="#00FFFF" 
               class="cell big thin">c
         </marquee>
      </div>
   </div>
</li>
	  
	  <li class="" data-row="7" data-col="1" data-sizex="5" data-sizey="6">
	   <div class="cell">
                  <div data-type="image"
                     data-url="http://www.niederschlagsradar.de/image.ashx?type=regioloop&regio=osn&c=-3&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=2016381139"
                     data-size="100%"
                     data-height="270px"
                     data-width="440px"
                     data-opacity="1"
                     data-refresh="120">
                  </div>
            </li>
	  
  
<li class="halbTransparent border-left border-right" data-row="1" data-col="6" data-sizex="2" data-sizey="3">
	<header class="headerTransparent">Licht </header>
 <div class="centred">
 <div data-type="switch" 
      data-device="SteckdoseStehlampe" 
      data-set-on="on" 
      data-set-off="off" 
      data-on-background-color="green"
      data-off-background-color="#FF0000"
      class="cell" >
	  </div>
 <div data-type="label" class="cell">Esszimmer</div>
</div>
</li>

<li class="halbTransparent border-left border-right" data-row="1" data-col="8" data-sizex="2" data-sizey="3">
	<header class="headerTransparent">Licht </header>
 <div class="centred">
 <div data-type="switch" 
      data-device="SteckdoseTischlampe" 
      data-set-on="on" 
      data-set-off="off" 
      data-on-background-color="green"
      data-off-background-color="#FF0000"
      class="cell" >
	  </div>
 <div data-type="label" class="cell">Wohnzimmer</div>
</div>
</li>

<li class="halbTransparent border-left border-right" data-row="1" data-col="10" data-sizex="2" data-sizey="3">
<header class="headerTransparent">Subwoofer </header>
<div class="centred">
<div data-type="switch"
			 data-device="Brennstuhl_B"
			 data-set-on="on" 
             data-set-off="off"
			 data-on-color="black"
			 data-off-color="black"
			 data-on-background-color="green"
			 data-off-background-color="#FF0000"
			 data-icon="fa-power-off"
			 class="cell"> 
			 </div>
	</li>	
		
<li class="halbTransparent border-left border-right" data-row="4" data-col="6" data-sizex="2" data-sizey="3">
<header class="headerTransparent">Naehmaschine </header>
<div class="centred">
<div data-type="switch"
			 data-device=""
			 data-set-on="on" 
             data-set-off="off"
			 data-on-color="black"
			 data-off-color="black"
			 data-on-background-color="green"
			 data-off-background-color="#FF0000"
			 data-icon="fa-power-off"
			 class="cell"> 
		</div>
	</li>
	
	<li class="halbTransparent border-left border-right" data-row="4" data-col="8" data-sizex="2" data-sizey="3">
	<header class="headerTransparent"></header>
<div class="centred">
		<div data-type="pagebutton"  
				data-url="#content_deko.html"	   	
				data-load="#content_deko" 
				data-fade-duration="fast" 
				data-active-pattern=".*#content_deko.html"
				data-icon="fa-star-half-o" 
				data-icon-color="green"				
                data class="cell">
			</div>
				<div data-type="label" class="compressed normal shadow darker">Dekosteuerung</div>
				</div>

	<li class="halbTransparent border-left border-right" data-row="4" data-col="10" data-sizex="2" data-sizey="3">
	<header class="headerTransparent"></header>
 <div class="centred">
		<div data-type="switch"
			 data-device="Schiebetuer_runter"
			 data-set-on="on" 
			 data-set-off="off"
			 data-on-background-color="green"
			 data-off-background-color="#FF0000"
			 data-icon="fa-power-off"
			 class="cell" > 
		</div>
 <div data-type="label" class="cell">Schiebetür</div>
 </div>
		
	<div style="position:absolute; bottom:0; right:0;"
          data-type="wdtimer" 
          data-device="ZeitschaltuhrSchiebertuer_runter"    
		  data-timesteps="5"
          data-style="round" 
          data-theme="dark"  
		  data-width="800"
		  data-height="600"
		  data-savecfg="true"
          data-title="ZeitschaltuhrSchiebertuer_runter"  
		  data-sortcmdlist="MANUELL"
          data-cmdlist='{"An":"on","Aus":"off","Timer 1 Std.":"on-for-timer:3600","Timer 2 Std.":"on-for-timer:7200","Timer 3 Std.":"on-for-timer:10800","Timer 4 Std.":"on-for-timer:14400"}'
        >
         <div data-type="symbol" 
		      data-icon="fa-gears" 
			  data-get="Deko 2" 
			  data-background-color="blue"
			  class="cell small"></div>
        </div>
	</li>	
		<li class="halbTransparent border-left border-right" data-row="8" data-col="6" data-sizex="2" data-sizey="3">
		<header class="">Jalousien Steuerung</header>
		</div>
	</li>	
	
<li class="" data-row="1" data-col="12" data-sizex="2" data-sizey="4">
<header class="">Jalousien Steuerung</header>
<div class="doublebox-V">
        <div data-type="push"  
             data-device="Hochfahren_UG" 
             data-icon="fa-arrow-circle-up" 
             data-set="TRIGGER"
             class="big">
        </div>
        <div data-type="push" 
             data-device="Jalousienrunter" 
             data-icon="fa-arrow-circle-down"  
             data-set="TRIGGER"
             class="big">
			 
</div>	
</li>			

<li class="" data-row="5" data-col="12" data-sizex="2" data-sizey="4">
<header class="">Sonnenschutz</header>
<div class="doublebox-V">
        <div data-type="push"  
             data-device="Sonnenschutz_hoch_UG" 
             data-icon="fa-arrow-circle-up"   
             data-set="TRIGGER"
             class="big">
        </div>
        <div data-type="push" 
             data-device="Sonnenschutz_UG" 
             data-icon="fa-arrow-circle-down" 
             data-set="TRIGGER"
             class="big">
		</div>
</li>
<li class="" data-row="10" data-col="12" data-sizex="1" data-sizey="3">
<header class="">Party</header>
<div data-type="switch"
			 data-device="Party"
			 data-set="trigger"
			 data-on-color="black"
			 data-off-color="black"
			 data-on-background-color="green"
			 data-off-background-color="#FF0000"
			 data-icon="fa-power-off"
			 class="centred normal"> 
		</div>
	</li>	
	
	
<li class="" data-row="10" data-col="13" data-sizex="1" data-sizey="3">
<header class="">Urlaub</header>
<div class="centred">
<div data-type="switch"
			 data-device="SchalterUrlaub"
			 data-get="power"
			 data-on-color="black"
			 data-off-color="black"
			 data-on-background-color="green"
			 data-off-background-color="#FF0000"
			 data-icon="fa-power-off"
			 class="normal">
			 </div>
			 


</li>	
</li>
</ul>
</div>
</div>
</body>
</html>

danke schon mal

Gunther · 03 Januar 2018, 19:17:38

Nur kurz: z. B. sehe ich unten zwei schließende li (eines zuviel)

Strukturier mal Dein File in der folgenden Form, so kommst Du Fehlern schneller auf die Spur und zugleich fällt es uns auch leichter einen Blick drauf zu werfen.

Code Auswählen

<!------------------------------ Start Licht Flur OG --------------------------->
    			<li data-row="1" data-col="12" data-sizex="3" data-sizey="5">
				<div data-template="template_label_title.html" data-parameter='{"var_title":"OG Flur"}'></div>
        			
        			<!-- Start horizontale Box 1 -->
        			<div class="hbox items-top">
        			
        			<!-- Start Spalte 1 -->
        			<div class="cell-1-1">
        				<!-- Start vertikale Box -->
        				<div class="vbox">
        					<div class="left-narrow darker" data-type="label">Lichtrahmen</div>
        					<div data-template="template_lichtkaesten_og_fl.html" data-parameter='{"var_seite":"2_light_etage_xx"}'></div>
        				</div>
        				<!-- Ende vertikale Box -->
        			</div>
        			<!-- Ende Spalte 1 -->
        			
        			</div> 
        			<!-- Ende horizontale Box 1 --> 
    			</li>
     			<!------------------------------ Ende Licht Flur OG --------------------------->

Wenn Du ein Gridster fehlerhaft hast, passiert das auch:

(col oder row) irgendwo div nicht geschlossen
(col oder row) überlappend

Für den Fall überlappend habe ich mir ein Excel (siehe Screenshot) angelegt und beschrifte im Excel. Manchmal funktioniert ein Gridster trotz falscher col row Definition. Wenn eines dazu kommst bröckelt es auf einmal.

Wasserwerk33 · 03 Januar 2018, 19:22:30

Sehr geile Hilfe. Danke die werde ich mir merken.

Ich schau nochmal drüber.

ToM_ToM · 03 Januar 2018, 20:03:44

Hey Wasserwerk33, ich habe mir deine Frage und die Lösung nicht angeschaut. Aber der Fehler liegt ganz klar im Titel.

Egal ob schon gelöst oder nicht: Kannst du den Titel bitte anpassen damit auch andere helfen können oder Hilfe finden wenn sie das gleiche Problem haben?

Danke.

VG, Thomas

Wasserwerk33 · 03 Januar 2018, 20:36:34

Hey thomas

Na klar. Hoffe so finden andere auch hilfe.

FHEM Forum

Mein Tablet Ui ist total durcheinander

Wasserwerk33

Gunther

Wasserwerk33

ToM_ToM

Wasserwerk33