Frage zu einer Formatierung innerhalb eines PopUp

moonsorrox · 08 Januar 2020, 15:09:31

ich bekomme es einfach nicht hin das mir in einem PopUp die drei "hbox" nicht zu groß werden. Das Problem ist, dass er mir egal wie groß ich das PopUp mache immer rechts den Scrollbalken anzeigt.
Mache ich das Popup kleiner werden die Boxen auch kleiner aber der Scrollbalken beliebt.
Ich habe schon mit "grow-0" die hbox formatiert dann werden die ersten beiden boxen klein und die dritte untere Box so groß das das wieder de Scrollbalken erscheint.
Und wie im Screenshot zu sehen sieht man eben immer den Text der unteren Box nicht mehr.
Wie auch zu sehen ist noch genug Abstand um eben die hboxen kleiner zu machen.
Vllt hat jemand eine Tipp
Code des Popup:

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!-- FHEM Tablet UI V2.7.15 -->
    <!-- Template für Schalter Erdgeschoss -->
</head>

<body>
<!-- ==== Erdgeschoß Schalter  ==== -->
	<div data-type="popup" data-height="550px" data-width="1100px" data-return-time="30" data-draggable="false">
		<div  style="font-size:150%; margin-top:5px;" data-type="symbol" data-color="white" data-icon="oa-time_manual_mode"></div>
		<div class="dialog bg-darkgray">
			<header style="background-color:#1f222e">
				<div class="sheet">
					<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">=== Steuerung für Beleuchtung ===</div>
					<div data-type="link" data-color="crimson" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
				</div>
			</header>
<!-- PopUp Inhalt Anfang -->
<div class="vbox grow-0 bg-darkgray">
    <div class="hbox" style="margin-top:0px;">
        <div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>		
		<div class="card"><div data-type="switch" data-device="WZ_Schrank" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_cabinet" data-background-icon="fa-square-o" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Schrank & Vitrine</div>
		</div>
        <div class="card"><div data-type="switch" data-device="WZ_Lampe_TV" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>TV Tisch</div>	
		</div>		
        <div class="card"><div data-type="switch" data-device="WZ_Stehlampe" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_floor_lamp" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Gruppe<br>Stehlampe</div>
		</div>
		
		<div class="card"><div data-type="switch" data-device="WZ_Licht_Weihnachten_Sw" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Licht Bogen</div>
		</div>        
		<div class="card"><div><!-- Textbox1 frei --></div></div>				
		<div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Wohnzimmer" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div>
			<div style="margin-top:10px; font-size:110%;">Temperatur<br>Wohnzimmer</div>
		</div>		
        <div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>       
    </div>
	
    <div class="hbox border-top-blue1" style="margin-top:0px;">
        <div class="card"><div style="color:darkorange; font-size:130%;">KÜCHE</div></div>		
        <div class="card"><div data-type="switch" data-device="KU_2Kanal_Sonoff_Touch" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">- LED - Sockelleiste</div>
		</div>        
		<div class="card"><div data-type="switch" data-device="KU_2Kanal_Sonoff_Touch_CH2" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_wire_system_1" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">- LED - Wandleiste</div>
		</div>		
        <div class="card"><div><!-- Textbox frei --></div></div>
		<div class="card"><div><!-- Textbox frei --></div></div>
        <div class="card"><div><!-- Textbox frei --></div></div>
        <div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Kueche" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div>
			<div style="margin-top:10px; font-size:110%;">Temperatur<br>Küche</div>
		</div>		
		<div class="card"><div style="color:darkorange; font-size:130%;">KÜCHE</div></div>
    </div>
	
    <div class="hbox border-top-blue1" style="margin-top:0px;">
        <div class="card"><div style="color:blue; font-size:130%;">AUSSEN</div></div>        
		<div class="card"><div data-type="switch" data-device="WegLampe_Sw_01" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_uplight" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Kugelleuchte & <br>Schuppen</div>
		</div>
        <div class="card"><div data-type="switch" data-device="WegLampe_Sw_02" data-set-on="Ein" data-set-off="Aus" data-icon="fa-lightbulb" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Weg hinten</div>
		</div>
        <div class="card"><div data-type="switch" data-device="AU_Garten" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_uplight" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Garten</div>
		</div>
		<div class="card"><div data-type="switch" data-device="NI3_LichtTerrasse" data-set-on="on" data-set-off="off" data-icon="oa-light_fairy_lights" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Terrasse</div>
		</div>
		<div class="card"><div><!-- Textbox frei --></div></div>
        <!--div class="card"><div data-type="switch" data-device="3xLED_lampe" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_downlight" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">3x LED<br>Eingang</div>
		</div-->
        <div class="card"><div data-type="switch" data-device="LichtEG_Busch" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_wire_system_2" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Eingang Busch</div>
		</div>		
		<div class="card"><div style="color:blue; font-size:130%;">AUSSEN</div></div>	
    </div>    
</div>
<!-- PopUp Inhalt Ende -->
		</div>
	</div>
</body>


</html>

setstate · 09 Januar 2020, 07:38:51

ich vermute, dass liegt an deinem <header>. Wenn du das weglässt, müsste der Scollbalken weg sein, oder?

Du könntest den Header innerhalb deiner ersten vbox setzen. Aber ohne class="sheet"

moonsorrox · 09 Januar 2020, 13:16:41

ja klar wenn ich den <header> wegnehme ist der Scrollbalken weg, was mich nur wundert ich habe bisher alle Popups so definiert, aber keines davon hat eben mehrere "vbox" Tags untereinander deshalb hatte ich damit bisher keine Schwierigkeiten.

Du meinst ich soll den header in eine "vbox" setzen.?
ich werde mal noch ein wenig damit probieren.

Ich hatte mir jetzt damit beholfen und die 3 "vbox" zusätzlich in eine normale Tabelle gesetzt damit funktionierte das auch..!

setstate · 09 Januar 2020, 13:30:37

Nicht eine neue vbox. In die erste Hauptbox deines popups als erstes item. Aber class vom Header erst einmal leer lassen.

moonsorrox · 09 Januar 2020, 13:54:29

OK, dass sieht dann erst einmal so aus. Den header oben drin auskommentiert und als ersten Eintrag in die 1. vbox gesetzt.
Bekomme sie jetzt aber nicht auf die volle Breite.

Code Auswählen

	<div data-type="popup" data-height="480px" data-width="1100px" data-return-time="30" data-draggable="false">
		<div style="font-size:150%; margin-top:5px;" data-type="symbol" data-color="white" data-icon="oa-time_manual_mode"></div>
		<div class="dialog bg-darkgray">
			<!--header style="background-color:#1f222e">
				<div class="sheet">
					<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">=== Steuerungs - Panel für Beleuchtung ===</div>
					<div data-type="link" data-color="crimson" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
				</div>
			</header>
<!-- PopUp Inhalt Anfang -->
<div class="vbox bg-darkgray">
			
			<header style="background-color:#1f222e">
				<div class="">
					<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">=== Steuerungs - Panel für Beleuchtung ===</div>
					<div data-type="link" data-color="crimson" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
				</div>
			</header>
		

    <div class="hbox" style="margin-top:0px;">
        <div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>		
		<div class="card"><div data-type="switch" data-device="WZ_Schrank" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_cabinet" data-background-icon="fa-square-o" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Schrank & Vitrine</div>
		</div>
        <div class="card"><div data-type="switch" data-device="WZ_Lampe_TV" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>TV Tisch</div>	
		</div>		
        <div class="card"><div data-type="switch" data-device="WZ_Stehlampe" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_floor_lamp" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Gruppe<br>Stehlampe</div>
		</div>
		
		<div class="card"><div data-type="switch" data-device="WZ_Licht_Weihnachten_Sw" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Licht Bogen</div>
		</div>        
		<div class="card"><div><!-- Textbox1 frei --></div></div>				
		<div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Wohnzimmer" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div>
			<div style="margin-top:10px; font-size:110%;">Temperatur<br>Wohnzimmer</div>
		</div>		
        <div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>       
    </div>
	
    <div class="hbox border-top-blue1" style="margin-top:0px;">
        <div class="card"><div style="color:darkorange; font-size:130%;">KÜCHE</div></div>		
        <div class="card"><div data-type="switch" data-device="KU_2Kanal_Sonoff_Touch" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">- LED - Sockelleiste</div>
		</div>        
		<div class="card"><div data-type="switch" data-device="KU_2Kanal_Sonoff_Touch_CH2" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_wire_system_1" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
			<div style="margin-top:10px; font-size:100%;">- LED - Wandleiste</div>
		</div>		
        <div class="card"><div><!-- Textbox frei --></div></div>
		<div class="card"><div><!-- Textbox frei --></div></div>
        <div class="card"><div><!-- Textbox frei --></div></div>
        <div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Kueche" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div>
			<div style="margin-top:10px; font-size:110%;">Temperatur<br>Küche</div>
		</div>		
		<div class="card"><div style="color:darkorange; font-size:130%;">KÜCHE</div></div>
    </div>
	
    <div class="hbox border-top-blue1" style="margin-top:0px;">
        <div class="card"><div style="color:blue; font-size:130%;">AUSSEN</div></div>        
		<div class="card"><div data-type="switch" data-device="WegLampe_Sw_01" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_uplight" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Kugelleuchte & <br>Schuppen</div>
		</div>
        <div class="card"><div data-type="switch" data-device="WegLampe_Sw_02" data-set-on="Ein" data-set-off="Aus" data-icon="fa-lightbulb" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Weg hinten</div>
		</div>
        <div class="card"><div data-type="switch" data-device="AU_Garten" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_uplight" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Garten</div>
		</div>
		<div class="card"><div data-type="switch" data-device="NI3_LichtTerrasse" data-set-on="on" data-set-off="off" data-icon="oa-light_fairy_lights" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Terrasse</div>
		</div>
		<div class="card"><div><!-- Textbox frei --></div></div>
        <!--div class="card"><div data-type="switch" data-device="3xLED_lampe" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_downlight" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">3x LED<br>Eingang</div>
		</div-->
        <div class="card"><div data-type="switch" data-device="LichtEG_Busch" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_wire_system_2" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>														
			<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Eingang Busch</div>
		</div>		
		<div class="card"><div style="color:blue; font-size:130%;">AUSSEN</div></div>	
    </div>    
</div>
<!-- PopUp Inhalt Ende -->
		</div>
	</div>

setstate · 09 Januar 2020, 14:21:40

Perfekt. Das andere sind dann noch Feinheiten. Ich würde class="w100" beim Header probieren.

moonsorrox · 09 Januar 2020, 14:32:00

vielen Dank das funktioniert jetzt mit w100 auch.
Das eine leere <div class=""></div> im header kann ich jetzt auch weglassen, dass macht nichts.

Nun muss ich nur noch den header etwas schmaler machen der ist etwas zu dick geworden.

Kuehnhackel · 12 Januar 2020, 15:56:19

Zitat von: moonsorrox am 08 Januar 2020, 15:09:31
ich bekomme es einfach nicht hin das mir in einem PopUp die drei "hbox" nicht zu groß werden. Das Problem ist, dass er mir egal wie groß ich das PopUp mache immer rechts den Scrollbalken anzeigt.
Mache ich das Popup kleiner werden die Boxen auch kleiner aber der Scrollbalken beliebt.
Ich habe schon mit "grow-0" die hbox formatiert dann werden die ersten beiden boxen klein und die dritte untere Box so groß das das wieder de Scrollbalken erscheint.
Und wie im Screenshot zu sehen sieht man eben immer den Text der unteren Box nicht mehr.
Wie auch zu sehen ist noch genug Abstand um eben die hboxen kleiner zu machen.
Vllt hat jemand eine Tipp
Code des Popup:
Code Auswählen Erweitern
<!DOCTYPE html> <html> <head>   </head> <body>  <div data-type="popup" data-height="550px" data-width="1100px" data-return-time="30" data-draggable="false"> <div style="font-size:150%; margin-top:5px;" data-type="symbol" data-color="white" data-icon="oa-time_manual_mode"></div> <div class="dialog bg-darkgray"> <header style="background-color:#1f222e"> <div class="sheet"> <div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">=== Steuerung für Beleuchtung ===</div> <div data-type="link" data-color="crimson" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div> </div> </header>  <div class="vbox grow-0 bg-darkgray"> <div class="hbox" style="margin-top:0px;"> <div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div> <div class="card"><div data-type="switch" data-device="WZ_Schrank" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_cabinet" data-background-icon="fa-square-o" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Schrank & Vitrine</div> </div> <div class="card"><div data-type="switch" data-device="WZ_Lampe_TV" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Beleuchtung<br>TV Tisch</div> </div> <div class="card"><div data-type="switch" data-device="WZ_Stehlampe" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_floor_lamp" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Gruppe<br>Stehlampe</div> </div> <div class="card"><div data-type="switch" data-device="WZ_Licht_Weihnachten_Sw" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Licht Bogen</div> </div> <div class="card"><div></div></div> <div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Wohnzimmer" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div> <div style="margin-top:10px; font-size:110%;">Temperatur<br>Wohnzimmer</div> </div> <div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div> </div> <div class="hbox border-top-blue1" style="margin-top:0px;"> <div class="card"><div style="color:darkorange; font-size:130%;">KÜCHE</div></div> <div class="card"><div data-type="switch" data-device="KU_2Kanal_Sonoff_Touch" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">- LED - Sockelleiste</div> </div> <div class="card"><div data-type="switch" data-device="KU_2Kanal_Sonoff_Touch_CH2" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_wire_system_1" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">- LED - Wandleiste</div> </div> <div class="card"><div></div></div> <div class="card"><div></div></div> <div class="card"><div></div></div> <div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Kueche" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div> <div style="margin-top:10px; font-size:110%;">Temperatur<br>Küche</div> </div> <div class="card"><div style="color:darkorange; font-size:130%;">KÜCHE</div></div> </div> <div class="hbox border-top-blue1" style="margin-top:0px;"> <div class="card"><div style="color:blue; font-size:130%;">AUSSEN</div></div> <div class="card"><div data-type="switch" data-device="WegLampe_Sw_01" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_uplight" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Kugelleuchte & <br>Schuppen</div> </div> <div class="card"><div data-type="switch" data-device="WegLampe_Sw_02" data-set-on="Ein" data-set-off="Aus" data-icon="fa-lightbulb" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Weg hinten</div> </div> <div class="card"><div data-type="switch" data-device="AU_Garten" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_uplight" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Garten</div> </div> <div class="card"><div data-type="switch" data-device="NI3_LichtTerrasse" data-set-on="on" data-set-off="off" data-icon="oa-light_fairy_lights" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Terrasse</div> </div> <div class="card"><div></div></div>  <div class="card"><div data-type="switch" data-device="LichtEG_Busch" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_wire_system_2" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div> <div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Eingang Busch</div> </div> <div class="card"><div style="color:blue; font-size:130%;">AUSSEN</div></div> </div> </div>  </div> </div> </body> </html>

Ich würde folgendes testen

Zitat
<style type="text/css">
body {
overflow: hidden;
}
</style>

LG Ralf