Moin Moin
Ich ahbe gerade eine Anzeige für Spritkosten erstellt
Nun habe ich leider zwei Probleme, wo ich nicht weiß wie ich diese beheben kann :(
Im folgenden der Code:
<div class="inline big darker">
Telegram Benachrichtigung:
</div>
<div data-device="SpritkostenNotify" data-get="state" data-type="label"></div>
<div data-type="checkbox" data-device="SpritkostenNotify"
data-get-on="active" data-get-off="inactive"
data-set-on="active" data-set-off="inactive"
class="inline">
</div>
<div class="sheet">
<div class="row">
<div class="cell big darker">
Tankstelle
</div>
<div class="cell big darker">
Diesel
</div>
<div class="cell big darker">
Super
</div>
<div class="cell big darker">
E10
</div>
</div>
<div class="row">
<div class="cell big darker">
HEM
</div>
<div data-type="label"
data-device="TankstelleHEM"
data-get="Diesel"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleHEM"
data-get="SuperE5"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleHEM"
data-get="SuperE10"
class="cell big darker">
</div>
</div>
<div class="row">
<div class="cell big darker">
JET
</div>
<div data-type="label"
data-device="TankstelleJET"
data-get="Diesel"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleJET"
data-get="SuperE5"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleJET"
data-get="SuperE10"
class="cell big darker">
</div>
</div>
<div class="row">
<div class="cell big darker">
STAR
</div>
<div data-type="label"
data-device="TankstelleSTAR"
data-get="Diesel"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleSTAR"
data-get="SuperE5"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleSTAR"
data-get="SuperE10"
class="cell big darker">
</div>
</div>
<div class="row">
<div class="cell big darker">
TOTAL
</div>
<div data-type="label"
data-device="TankstelleTOTAL"
data-get="Diesel"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleTOTAL"
data-get="SuperE5"
class="cell big darker">
</div>
<div data-type="label"
data-device="TankstelleTOTAL"
data-get="SuperE10"
class="cell big darker">
</div>
</div>
</div>
Angehängt ist ebenfalls ein Bild wie das ganze aussieht
Nun zu meinem Problem:
1. Problem
Für die Spritkosten-Benachrichtigung über Telegram zum ein bzw ausschalten benutze ich eine Checkbox.
Klappt auch wunderbar. Nur wenn ich diese Funktion jetzt einschalte, dann länger nicht auf der Oberfläche bin und dann die Seite neulade, ist die Checkbox deaktiviert obwohl die abfrage positiv ist
(ist im Bild ganz gut dargestellt)
Woran liegt das? Hoffe ihr könnt mir weiterhelfen
2. Problem
Wie ihr seht ist die Tabelle größer als das Widget. Wobei die Zellenhöhe nur einfach zu hoch ist.
Wie bekomme ich jetzt die Zeilen enger zusammen damit das in das vorgegebene Widget passt??
Ich hoffe ihr könnt mir weiterhelfen und bedanke mich jetzt schon bei euch
Gruß
Hast du eine Lösung für das Problem gefunden?
Ich habe einiges ausprobiert um meine Zeilen in die Kachel zu kriegen - leider bisher ohne Erfolg. Wie im Beispiel oben hängen einige Zeilen unten aus der Kachel hinaus.
Hier mein code für die Kachel:
<li data-row="3" data-col="3" data-sizex="2" data-sizey="2">
<div class="sheet">
<div class="row">
<div class="cell bigger centered" data-type="label" data-device="MyWeather" data-get="fc2_day_of_week" style="margin-top: -20px"></div>
<div class="cell bigger centered" data-type="label" data-device="MyWeather" data-get="fc3_day_of_week" style="margin-top: -20px"></div>
<div class="cell bigger centered" data-type="label" data-device="MyWeather" data-get="fc4_day_of_week" style="margin-top: -20px"></div>
<div class="cell bigger centered" data-type="label" data-device="MyWeather" data-get="fc5_day_of_week" style="margin-top: -20px"></div>
</div>
<div class="row">
<div class="cell big centered" data-type="weather" data-device="MyWeather" data-get="fc2_iconAPI" data-imageset="meteocons" style="width:50px; margin-top: -10px"></div>
<div class="cell big centered" data-type="weather" data-device="MyWeather" data-get="fc3_iconAPI" data-imageset="meteocons" style="width:50px; margin-top: -10px"></div>
<div class="cell big centered" data-type="weather" data-device="MyWeather" data-get="fc4_iconAPI" data-imageset="meteocons" style="width:50px; margin-top: -10px"></div>
<div class="cell big centered" data-type="weather" data-device="MyWeather" data-get="fc5_iconAPI" data-imageset="meteocons" style="width:50px; margin-top: -5px"></div>
</div>
<div class="row">
<div class="cell top-align" data-type="label" data-device="MyWeather" data-get="fc2_condition" style="width:50px; margin-top: -30px"></div>
<div class="cell top-align" data-type="label" data-device="MyWeather" data-get="fc3_condition" style="width:50px; margin-top: -30px"></div>
<div class="cell top-align" data-type="label" data-device="MyWeather" data-get="fc4_condition" style="width:50px; margin-top: -30px"></div>
<div class="cell top-align" data-type="label" data-device="MyWeather" data-get="fc5_condition" style="width:50px; margin-top: -30px"></div>
</div>
<div class="row">
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_low_c"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_low_c"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_low_c"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_low_c"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
</div>
</div>
<div class="row">
<div class="cell" data-type="label" data-device="MyWeather" data-get="fc2_uvIndex" data-unit= "UV - Index"></div>
<div class="cell" data-type="label" data-device="MyWeather" data-get="fc3_uvIndex" data-unit= "UV - Index"></div>
<div class="cell" data-type="label" data-device="MyWeather" data-get="fc4_uvIndex" data-unit= "UV - Index"></div>
<div class="cell" data-type="label" data-device="MyWeather" data-get="fc5_uvIndex" data-unit= "UV - Index"></div>
</div>
<div class="row">
<div class="cell small inline" data-type="label" data-device="MyWeather" data-get="fc2_wind_condition"></div>
<div class="cell small inline" data-type="label" data-device="MyWeather" data-get="fc3_wind_condition"></div>
<div class="cell small inline" data-type="label" data-device="MyWeather" data-get="fc4_wind_condition"></div>
<div class="cell small inline" data-type="label" data-device="MyWeather" data-get="fc5_wind_condition"></div>
</div>
</div>
</li>
Einerseits muss nach CSS Richtlinie das CSS Attribut mit einem Semikolon abgeschlossen werden - aus deinem
style="width:50px; margin-top: -30px" muss also
style="width:50px; margin-top: -30px;" werden (es kann sonst sein, dass der Browser das ignoriert).
Die Abmessungen eines CSS Elements richten sich nach dem CSS Box Model (https://www.w3schools.com/css/css_boxmodel.asp) und der dazugehörigen definierten Werte. Ansonsten rendert der Browser ggf dynamisch die Maße für margin, border und padding.
Anstelle von margin-top könntest du auch eine der FTUI CSS Klassen (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen) wie top-narrow nutzen.
Wenn das keine Abhilfe schafft, die position auf relative setzen und dann mit margin-top: -30px; neu positionieren (hier zum weiterlesen (https://internetingishard.com/html-and-css/advanced-positioning/)):
style="width: 50px; position: relative; margin-top: -30px;"