FTUI Mobile Positionierung klappt nicht

Begonnen von ReneR1986, 12 Januar 2023, 11:01:09

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

ReneR1986

12 Januar 2023, 11:01:09
Hallo zusammen,
ich habe mir mithilfe dieser Beispiele eine simple "mobile Version" aufgebaut.
https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/mobil
Ich weiß, mittlerweile gibt es schon FTUI 3, flex usw. aber ich wollte einfach quick and dirty auf die schnelle was bauen.. :D

Leider scheitere ich an einer simplen Sache bzw. mir ist nicht klar, was da passiert und wie ich es lösen kann.
Im Screenshot im Anhang sieht man, dass sich die Inhalte der einzelnen Sections immer weiter nach unten verschieben, bis es schließlich überhaupt nicht mehr in der richtige Zeile ist. Ich habe schon zig verschiedene Klassen für die Positionierung mit unterschiedlichen Verschachtelungen ausprobiert aber das hat es meist noch schlimmer gemacht..
https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Gestaltung

Hat jemand eine Idee?

Code Auswählen
<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content1">
        <section>
            <div class="large col-1-1 bold">e-UP</div>
        </section>
<section>
            <div class="large col-1-2 left-align left-space">eUP</div>
<div data-type="label"
data-device="MQTT_Touran"
data-get='currentSOC_pct'
data-unit=" %"
class="col-1-2 right-align right-space">
</div>
        </section>
<section>
            <div class="large col-1-1 bold">PV-Anlage</div>
        </section>
<section>
            <div class="large col-1-2 left-align left-space">Erzeugung</div>
<div class="col-1-2 right-align">
<div data-type="symbol"
data-device="Plenticore"
data-get='Erzeugung'
data-states='["[0-9].[0-9][0-9]?","[0-9][0-9].[0-9][0-9]?","[0-9][0-9][0-9].[0-9][0-9]?", "[1-3][0-9][0-9][0-9].[0-9][0-9]?", "[4-9][0-9][0-9][0-9].[0-9][0-9]?"]'
data-icons='["fa-solar-panel"]'
data-colors='["#FF0000","#FF0000","#FF0000","#FF8000", "green"]'
class="inline">
</div>
<div data-type="label"
data-device="Plenticore"
data-get='Erzeugung'
data-states='["[0-9].[0-9][0-9]?","[0-9][0-9].[0-9][0-9]?","[0-9][0-9][0-9].[0-9][0-9]?", "[1-3][0-9][0-9][0-9].[0-9][0-9]?", "[4-9][0-9][0-9][0-9].[0-9][0-9]?"]'
data-colors='["#FF0000","#FF0000","#FF0000","#FF8000","green"]'
data-unit=" Watt"
class="inline">
</div>
</div>
</section>
<section>
            <div class="large col-1-2 left-align left-space">Einsp./Bezug</div>
<div class="col-1-2 right-align">
<div data-type="symbol"
data-device="Plenticore"
data-get='Einspeisung'
data-states='["[0-9].[0-9][0-9]","[0-9][0-9].[0-9][0-9]","[0-9][0-9][0-9].[0-9][0-9]", "[1-3][0-9][0-9][0-9].[0-9][0-9]", "[4-9][0-9][0-9][0-9].[0-9][0-9]"]'
data-icons='["fa-plug"]'
data-colors='["white","white","white","white","white"]'
class="inline">
</div>
<div data-type="label"
data-device="Plenticore"
data-get='Einspeisung'
data-unit=" Watt"
class="inline">
</div>
</div>
</section>
<section>
            <div class="large col-1-2 left-align left-space">Hausverbrauch</div>
<div class="col-1-2 right-align">
<div data-type="symbol"
data-device="Plenticore"
data-get='Hausverbrauch'
data-states='["[0-9].[0-9][0-9]","[0-9][0-9].[0-9][0-9]","[0-9][0-9][0-9].[0-9][0-9]", "[1-3][0-9][0-9][0-9].[0-9][0-9]", "[4-9][0-9][0-9][0-9].[0-9][0-9]"]'
data-icons='["fa-home"]'
data-colors='["white","white","white","white","white"]'
class="inline">
</div>
<div data-type="label"
data-device="Plenticore"
data-get='Hausverbrauch'
data-fix="1"
data-unit=" Watt"
class="inline">
</div>
</div>
</section>
<section>
            <div class="large col-1-2 left-align left-space">Kappa</div>
<div class="col-1-2 right-align">
<div data-type="symbol"
data-device="Plenticore"
data-get='Act_state_of_Charge'
data-states='["100.00","([7][5-9].[0-9][0-9])|([8-9][0-9].[0-9][0-9])","([5-6][0-9].[0-9][0-9])|([7][0-4].[0-9][0-9])","([2][5-9].[0-9][0-9])|([3-5][0-9].[0-9][0-9])","([0-9].[0-9][0-9])|([1][0-9].[0-9][0-9])|([2][0-4].[0-9][0-9])"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
data-colors='["green","green","green","#FF0000","#FF0000"]'
class="inline">
</div>
<div data-type="label"
data-device="Plenticore"
data-get='Act_state_of_Charge'
data-unit=" %"
class="inline">
</div>
</div>
</section>
<section>
            <div class="large col-1-2 left-align left-space">Restlaufzeit</div>
<div class="col-1-2 right-align">
<div data-type="symbol"
data-device="Plenticore"
data-icons='["oa-time_timer"]'
class="inline">
</div>
<div data-type="label"
data-device="Plenticore"
data-get='Restlaufzeit'
data-fix="1"
data-unit=" h"
class="inline">
</div>
</div>
</section>
<section>
            <div class="large col-1-1 bold">Temperaturen</div>
        </section>
         <section>
             <div class="large col-1-2 left-align left-space">Briefkasten</div>
             <div data-type="label" data-device="Temperaturfuehler_Briefkasten" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#bb6242","#3498db","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align left-space">Rene Wohnzimmer</div>
             <div data-type="label" data-device="FBDECT_fbahahttp_08761_0272545" data-get="InGradFormatiert" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#bb6242","#3498db","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align left-space">Rene Flur unten</div>
             <div data-type="label" data-device="Temperaturfuehler_Rene_Flur_unten" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#bb6242","#3498db","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align left-space">Thea</div>
             <div data-type="label" data-device="Temperaturfuehler_Thea" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#bb6242","#3498db","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>   
         <section>
             <div class="large col-1-2 left-align left-space">Kueche Rene</div>
             <div data-type="label" data-device="Thermostat_Rene_Kueche" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#3498db","#34aa33","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align left-space">Rene Anbau unten</div>
             <div data-type="label" data-device="Vibrationssensor_Rene_Terasse" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#3498db","#34aa33","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
         <section>
             <div class="large col-1-2 left-align left-space">Papa Eingang</div>
             <div data-type="label" data-device="Vibrationssensor_Papa_Haustuer" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#3498db","#34aa33","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section> 
         <section>
             <div class="large col-1-2 left-align left-space">Papa Stube</div>
             <div data-type="label" data-device="Vibrationssensor_Papa_Stube" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#3498db","#34aa33","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
<section>
             <div class="large col-1-2 left-align left-space">Keller</div>
             <div data-type="label" data-device="ecometer" data-get="Temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#3498db","#34aa33","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
<section>
             <div class="large col-1-2 left-align left-space">Wintergarten draußen    </div>
             <div data-type="label" data-device="Temperaturfuehler_Wintergarten" data-get="temperature" data-limits-part="1" data-unit=" C"
                  data-limits='[0,10,21]' data-colors='["#3498db","#34aa33","#ad3333"]'
                  class="large col-1-2 right-align right-space"></div>
         </section>
    </div>
</body>
</html>

ReneR1986

#1
12 Januar 2023, 13:42:16
So, nach stundenlanger Suche habe ich die Ursache gefunden. Es scheint, als wenn das Attribut data-unit des Label Widgets das ganze "kaputt" macht. Warum auch immer. Ich habe nun statt data-unit das Attribut data-post-text genommen.
Jetzt stimmt alles wieder...
Drucken
Nach oben Seiten1
Benutzer-Aktionen