FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: misux am 19 April 2018, 15:30:53

Titel: (ERLEDIGT) Problem mit vbox / hbox
Beitrag von: misux am 19 April 2018, 15:30:53
HI!

Ich versuche mir eine zweite hbox zu basteln was irgendwie nicht gelingt... er will mir die Dinge die ich dort drin habe nicht ordentlich nebeneinander skalieren... es ist eher alles määächtig groß und durcheinander auf dem ganzen Screen...

Könnte bitte jemand drüber schauen wo ich den Fehler habe? Finde ihn vor lauter </div> nicht... :-\

<li data-row="1" data-col="1" data-sizex="9" data-sizey="1" class=bg-transparent>

<div class="hbox items-space-between">
<!-- ============= TOR ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="padding:10px" class="inline fixedlabel bigger" data-type="label" data-device="SENSOR_1_Tor" data-states='["open","closed"]' data-classes='["red","grey"]'>TOR</div>

<div data-type="classchanger"
      data-device="SENSOR_1_Tor"
      data-on-class="roundborder-red"
      data-off-class="roundborder-black">

    <div data-type="label"
      style="line-height: 3em;"
      data-device="SENSOR_1_Tor"
      data-get="STATE"
      data-substitution='["open","OFFEN!!!","closed","Geschlossen"]'
      data-limits='["open","closed"]'
      data-colors='["#FF0000","grey"]'></div>
</div>
</div>



<!-- ============= SUNRISE ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="color:#aa6900;" class="tall">
<div class="wi wi-sunrise"></div>
<div data-type="label" color:white; data-device="sunrise_indoor" data-get="NTM" class=""></div>
</div>
</div>


<!-- ============= UHR ================ -->
<!-- ============================================== -->
<div class="vbox">
<div style="padding-top:10px !important; color:white" class="">
<div data-type="clock" data-format="H:i" class="great"></div>
<div data-type="clock" data-format="d.M Y" class=""></div>
</div>
</div>


<!-- ============= SUNSET ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="color:#aa6900;" class="tall">
<div class="wi wi-sunset"></div>
<div data-type="label" color:white; data-device="sunset_indoor" data-get="NTM" class=""></div>
</div>
</div>


<!-- ============= HEIZUNG ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="padding:10px" class="fixedlabel bigger" data-type="label" data-device="SENSOR_1_Heizung" data-states='["open","closed"]' data-classes='["red","grey"]'>HEIZUNG</div>

<div data-type="classchanger"
      data-device="SENSOR_1_Heizung"
      data-on-class="roundborder-red"
      data-off-class="roundborder-black">

    <div data-type="label"
      style="line-height: 3em;"
      data-device="SENSOR_1_Heizung"
      data-get="STATE"
      data-substitution='["closed","i.O.","open","ALARM!!!"]'
      data-limits='["closed","open"]'
      data-colors='["grey","#FF0000"]'></div>
</div>
</div>

</li>

Titel: Antw:Problem mit vbox / hbox
Beitrag von: TWART016 am 19 April 2018, 16:08:35
Schicke am besten mal ein Bild und überprüfen deine divs. Ein den ersten Blick fehlen mindestens zwei >
Titel: Antw:Problem mit vbox / hbox
Beitrag von: misux am 20 April 2018, 07:27:17
Jaha... Die hab ich auch gefunden... Sogar 4 davon...  Hier das Bild weil es leider keine Besserung gibt nach der korrektur.

Das verrückt große soll eigentlich in der ersten Reihe nebeneinander sein...
Titel: Antw:Problem mit vbox / hbox
Beitrag von: drhirn am 20 April 2018, 08:59:31
Du musst den DIV innerhalb von vbox/hbox immer die Klasse "card" zuweisen.
Titel: Antw:Problem mit vbox / hbox
Beitrag von: misux am 20 April 2018, 09:13:55
 :D Das ist es! Vielen Dank!!!

Noch eine Frage... wie passe ich einzeln die Header mit Farben (Schriftfarbe und Hintergrung) an... bei mir ist es überall Grauer Hintergrund und hellgraue Schriftfarbe... Würde die Gerne unterschiedlich machen...

z.B. den Lichtschalter Header:

<li data-row="2" data-col="1" data-sizex="15" data-sizey="1" class="bg-transparent">

<header>Lichtschalter</header>
</br>
<div class="hbox items-space-between bold large">
<div class="vbox">
<div data-type="switch" class="cell narrow" data-on-background-color="#00FF00" 
             data-device="WZEZ_WZFLed"
             data-get-on="on"
     data-get-off="off"
     data-set-on="on">
</div>
<div class="fixedlabel" data-type="label" data-device="WZEZ_WZFLed" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Fenster LED</div>
</div>
Titel: Antw:Problem mit vbox / hbox
Beitrag von: drhirn am 20 April 2018, 09:16:39
Mit CSS. Entweder direkt im header-Tag
<header style="background: blue; color: white;">Lichtschalter</header>
oder in einer eigenen css-Datei, die du dann auch einbinden musst.
Titel: Antw:Problem mit vbox / hbox
Beitrag von: misux am 23 April 2018, 13:45:52
 ;D

Super! Vielen Dank!