Hallo Leute,
ich habe auf einmal ein Problem mit der Darstellung einer Tabelle. "Auf einmal" deshalb, weil ich nichts verändert, oder ein Update gemacht habe.
Im linken unteren Bereich sollen viele Klimadaten (14 "Räume") angezeigt werden ("Raumname"/Temperatur/Luftfeuchtigkeit).
Bis vor Kurzem hat das auch gut funktioniert. Aber nun ist die Tabelle auf einmal sehr weit auseinander gezogen ...
hier mal der Code der index.html
<!DOCTYPE html>
<html>
<head>
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="50">
<meta name="gridster_cols" content="12">
<meta name="gridster_rows" content="9">
<meta name="gridster_disable" content="1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
<Header>Salzlampe</header>
<div class="top-space">
<div data-type="switch"
data-device="ESP08"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="2">
<Header>Bodenlampe</header>
<div class="top-space">
<div data-type="switch"
data-device="ESP07"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
<Header>Stehlampe</header>
<div class="top-space">
<div data-type="switch"
data-device="ESP06"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="2">
<Header>Alle Lampen</header>
<div class="top-space">
<div data-type="switch"
data-device="ALLE_LAMPEN"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="2">
<Header>Salzlampe Diele</header>
<div class="top-space">
<div data-type="switch"
data-device="ESPTH01"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="2">
<Header>Papierlampe Diele</header>
<div class="top-space">
<div data-type="switch"
data-device="ESP04"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="2">
<Header>DECT Eltern</header>
<div class="top-space">
<div data-type="switch"
data-device="FBDECT_Fritzbox_17"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="1" data-col="8" data-sizex="1" data-sizey="2">
<Header>DECT Stube</header>
<div class="top-space">
<div data-type="switch"
data-device="FBDECT_Fritzbox_16"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="5" data-col="1" data-sizex="3" data-sizey="1">
<header><div data-type="label" class="medium orange big">Klimadaten</div></header>
<header><div data-type="label" class="orange">Ort Temperatur Luftfeuchtigkeit</div></header>
<div class="sheet big">
<div class="container row top-space">
<div class="col-1-3">
<div data-type="label" class="darker tiny left-align">Außen:</div>
</div>
<div class="col-1-3">
<div data-type="label" class="darker center-align"></div>
</div>
<div class="col-1-3">
<div data-type="label" class="darker right-align"></div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Terasse</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="LC_Aussen_Sued" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="LC_Aussen_Sued" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Garage</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="LC_Aussen_Nord" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="LC_Aussen_Nord" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="darker tiny left-align">Erdgeschoß:</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange center-align"></div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange right-align"></div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Badezimmer</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="LC_Bad" data-get="temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="LC_Bad" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Küche</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP16" data-get="AM2301_Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP16" data-get="AM2301_Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Diele</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPTH01" data-get="AM2301_Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPTH01" data-get="AM2301_Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Eltern</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP02" data-get="AM2301_Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP02" data-get="AM2301_Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Büro</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP01" data-get="AM2301_Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP01" data-get="AM2301_Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Wohnen/Essen</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP08" data-get="AM2301_Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESP08" data-get="AM2301_Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="darker tiny left-align">Kellergeschoß:</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange center-align"></div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange right-align"></div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Serverkeller</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_5" data-get="Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_5" data-get="Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Serverschrank</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_3" data-get="Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_3" data-get="Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Hobbykeller</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_2" data-get="Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_2" data-get="Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">HWR</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_4" data-get="Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_4" data-get="Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Heizung</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_1" data-get="Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_1" data-get="Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="orange left-align">Vorrat</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_8" data-get="Temperature" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-3">
<div data-type="label"
data-device="ESPEasy_ENV1_AM2301_8" data-get="Humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,65]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<!-- <div class="col-1-4">
<div data-type="symbol" data-device="LC_Aussen_Sued" data-get="battery" data-icons='["fa-battery-1 fa-blink","fa-battery-4"]' class="small" data-get-on='["low","ok"]' data-on-colors='["red","green"]'>
</div>
--> </div>
</div>
</li>
<li data-row="3" data-col="1" data-sizex="3" data-sizey="2">
<Header>Uhrzeit</header>
<div class="inline medium orange grande">
<div data-type="clock"
data-format="H:i:s">
</div>
</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="2">
<Header>Nachttisch Volker</header>
<div class="top-space">
<div data-type="switch"
data-device="ESP02"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="2">
<Header>Nachttisch Gabi</header>
<div class="top-space">
<div data-type="switch"
data-device="ESP03"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="3" data-col="6" data-sizex="1" data-sizey="2">
<Header>Tischlampe Essen</header>
<div class="top-space">
<div data-type="switch"
data-device="ESP14"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="3" data-col="7" data-sizex="1" data-sizey="2">
<Header>WOHNZIMMER</header>
<div class="top-space">
<div data-type="switch"
data-device="HM_5513AA_Sw_02"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="3" data-col="8" data-sizex="1" data-sizey="2">
<Header>ESSZIMMER</header>
<div class="top-space">
<div data-type="switch"
data-device="HM_5513AA_Sw_01"
data-get-on="on.*"
data-set-on="on"
</div>
</div>
</li>
<li data-row="7" data-col="7" data-sizex="1" data-sizey="2">
<Header>Büro Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_1487ea"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="7" data-col="8" data-sizex="1" data-sizey="2">
<Header>Bad Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_17f576"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="5" data-col="4" data-sizex="1" data-sizey="2">
<Header>Diele Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_14cfc2"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="5" data-col="5" data-sizex="1" data-sizey="2">
<Header>Eltern Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_09ffda"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="5" data-col="6" data-sizex="1" data-sizey="2">
<Header>Johanna Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_067c76"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="5" data-col="7" data-sizex="1" data-sizey="2">
<Header>Küche Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_0a04f4"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="5" data-col="8" data-sizex="1" data-sizey="2">
<Header>Lukas Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_14d031"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="7" data-col="4" data-sizex="1" data-sizey="2">
<Header>Wohnen Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_16d4e3"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="7" data-col="5" data-sizex="1" data-sizey="2">
<Header>Hobby Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_164998"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="7" data-col="6" data-sizex="1" data-sizey="2">
<Header>HWR Thermostat</header>
<div class="">
<div data-type="thermostat"
class="small"
data-device="MAX_1649b2"
data-valve="valveposition"
data-min="5"
data-off="off"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</div>
</li>
<li data-row="9" data-col="4" data-sizex="1" data-sizey="2">
<Header>Diele</header>
<div>
<div class="doublebox-h centered wider">
<div data-type="push" data-device="HM_59ECC9"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set-on="hoch">
</div>
<div data-type="push" data-device="HM_59ECC9"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set-on="runter">
</div>
</div>
</div>
</li>
<li data-row="9" data-col="5" data-sizex="1" data-sizey="2">
<Header>Wohnen</header>
<div>
<div class="doublebox-h centered wider">
<div data-type="push" data-device="HM_59ECFA"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set-on="hoch">
</div>
<div data-type="push" data-device="HM_59ECFA"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set-on="runter">
</div>
</div>
</div>
</li>
<li data-row="9" data-col="6" data-sizex="1" data-sizey="2">
<Header>Essen</header>
<div>
<div class="doublebox-h centered wider">
<div data-type="push" data-device="HM_59EC7D"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set-on="hoch">
</div>
<div data-type="push" data-device="HM_59EC7D"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set-on="runter">
</div>
</div>
</div>
</li>
<li data-row="9" data-col="7" data-sizex="1" data-sizey="2">
<Header>Kochen</header>
<div>
<div class="doublebox-h centered wider">
<div data-type="push" data-device="HM_59ECF3"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set-on="hoch">
</div>
<div data-type="push" data-device="HM_59ECF3"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set-on="runter">
</div>
</div>
</div>
</li>
<li data-row="9" data-col="8" data-sizex="1" data-sizey="2">
<Header>Bad</header>
<div>
<div class="doublebox-h centered wider">
<div data-type="push" data-device="HM_59ECA2"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set-on="hoch">
</div>
<div data-type="push" data-device="HM_59ECA2"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set-on="runter">
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
Kann mir da jemand von Euch auf die Sprünge helfen ?
(von html habe ich so gut wie keine Ahnung, das Ganze ist aus Beispielen "zusammengebaut)
Viele Grüße
Volker
Das erste wäre dein HTML-Code zu korrigieren
Bei allen <div data-type="switch"fehlen schliessende ">" vor </div>
Du hast zwar kein Update gemacht, aber vielleicht doch Browser-Updates bekommen? Es kann sein, dass es nicht mehr richtig interpretiert, was er früher trotz Fehler akzeptiert hat