Probleme bei der Anordnung

seb1fx · 31 Juli 2017, 10:35:50

Hallo,

ich verzweifele.
Habe gerade mit FTUI angefangen und komme nun bei einer banalen Sache nicht weiter.
Die Anordnung zw. horizontal und vertikal funzt nicht.

Vielleicht hat einer von euch ein besseren Blick drauf und kann mir sagen was ich falsch mache.
Es geht um das "Rot gefärbte"
Es ist derzeit vertikal/senkrecht und soll horizontal/waagerecht

<title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
<Header><div data-type="label" class="large">Uhrzeit</div></header>
<div data-type="clock"
data-format="d-m-Y H:i:s"
data-interval="1"
class="large wider">
</div>
</li>
<li data-row="1" data-col="4" data-sizex="4" data-sizey="2">
<header><div data-type="label" class="large">Abfall</div></header>
<div data-device="Muelltonnen" data-type="symbol" class="big warn wider"
data-get="Abfallkalender_BlaueundGelbeTonne_tage"
data-states='["1","([2-9]{1}|[0-9]{2})"]'
data-on-colors='["#000","#4747D1"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o"]'>
</div>
<div data-device="Muelltonnen" data-type="symbol" class="big warn wider"
data-get="Abfallkalender_BlaueundGelbeTonne_tage"
data-states='["1","([2-9]{1}|[0-9]{2})"]'
data-on-colors='["#000","#E6E600"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o"]'>
</div>
<div data-device="Muelltonnen" data-type="symbol" class="big warn wider"
data-get="Abfallkalender_Restmuell_tage"
data-states='["1","([2-9]{1}|[0-9]{2})"]'
data-on-colors='["#000","#9f9f9f"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o"]'>
</div>
</li>
<li data-row="3" data-col="1" data-sizex="2" data-sizey="2">
<Header><div data-type="label" class="large">EG Alle</div></header>
<div data-type="switch"
      data-device="WZ_Aus"
      data-get-on="on.*"
      data-set-on="on"
      class="top-space" >
     </div>
      <div data-type="label" class="">An/Aus</div>
</li>

<li data-row="5" data-col="1" data-sizex="2" data-sizey="5">
<Header><div data-type="label" class="large">EG Beleuchtung</div></header>
<div data-type="switch"
      data-device="EG.ZS_Bar"
      data-get-on="on.*"
      data-set-on="on"
      class="inline" >
     </div>
     <div data-type="label" class="wider">Bar</div>
   <div class="inline">
<div data-type="switch"
      data-device="EG.ZS_XMAS_Baum"
      data-get-on="on.*"
      data-set-on="on"
      class="inline" >
     </div>
     <div data-type="label" class="wider">Diele</div>
   <div data-type="dimmer" data-device="HUEDevice1"
      data-get="onoff"
      data-get-on="1"
     data-get-off="0"
      data-set=""
      data-set-on="on"
     data-set-off="off"
      data-dim="pct"
     class="inline" >
   </div>
   <div data-type="label" class="wider">EZ.Hue</div>
   <div data-type="dimmer" data-device="HUEDevice2"
      data-get="onoff"
      data-get-on="1"
     data-get-off="0"
      data-set=""
      data-set-on="on"
     data-set-off="off"
      data-dim="pct"
     class="inline" >
   </div>
   <div data-type="label" class="wider">WZ.Hue</div>
</li>
</ul>
</div>
</body>
</html>

setstate · 31 Juli 2017, 10:56:28

Vertikal angeordnet ist bei HTML Standard. Nebeneinander bedarf etwas Anstrengungen. Setzte mal für die Symbole unter class zusätzlich "inline" dazu. Eventuell "wider" entfernen.

seb1fx · 31 Juli 2017, 11:24:18

wie kann man es alternativ machen?

setstate · 31 Juli 2017, 11:32:20

Mit <div class="hbox"> ... </div> klammern.

seb1fx · 31 Juli 2017, 16:49:42

Hi,

ich hab da mal was versucht und den ganzen Tag gekämpft, mit mäßigem Erfolg.

<body>
<div class="vbox bg-lightblue">
<div class="hbox items-top bg-lightblue">
<div class="card"><header>Uhrzeit</header>
<div data-type="clock" data-format="d-m-Y H:i:s" div data-interval="1" div class="large wider"></div>
</div>

<div class="card"><header>Abfall</header>
<div class="hbox grow-3">
<div data-device="Muelltonnen"
data-type="symbol" class="big warn wider"
data-get="Abfallkalender_BlaueundGelbeTonne_tage"
data-states='["1","([2-9]{1}|[0-9]{2})"]'
data-on-colors='["#000","#4747D1"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o"]'></div>

<div data-device="Muelltonnen"
data-type="symbol" class="big warn wider"
data-get="Abfallkalender_BlaueundGelbeTonne_tage"
data-states='["1","([2-9]{1}|[0-9]{2})"]'
data-on-colors='["#000","#E6E600"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o"]'></div>

<div data-device="Muelltonnen"
data-type="symbol" class="big warn wider"
data-get="Abfallkalender_Restmuell_tage"
data-states='["1","([2-9]{1}|[0-9]{2})"]'
data-on-colors='["#000","#9f9f9f"]'
data-icons='["fa-trash-o warn fa-spin","fa-trash-o"]'></div>
</div></div>

<div class="card"><header>EG Alle</header>
<div class="vbox grow-3">
<div data-type="switch"
data-device="WZ_Aus"
        data-get-on="on.*"
        data-set-on="on"></div>
</div>
<div class="card"><header>EG Beleuchtung</header>
<div class="vbox grow-3">
<div data-type="switch"
data-device="EG.ZS_Bar"
        data-get-on="on.*"
        data-set-on="on">
Bar</div>
<div data-type="switch"
        data-device="EG.ZS_XMAS_Baum"
        data-get-on="on.*"
        data-set-on="on">
Diele</div>
     <div data-type="dimmer" data-device="HUEDevice1"
      data-get="onoff"
      data-get-on="1"
     data-get-off="0"
      data-set=""
      data-set-on="on"
     data-set-off="off"
      data-dim="pct">
EZ</div>
     <div data-type="dimmer" data-device="HUEDevice2"
      data-get="onoff"
      data-get-on="1"
     data-get-off="0"
      data-set=""
      data-set-on="on"
     data-set-off="off"
      data-dim="pct">
WZ</div>
</div></div>
</div>
</body>

setstate · 04 August 2017, 11:03:14

Card, hbox und vbox als Kombination benutzt CSS Flexbox und ist eher ein Krampf als einfach zu benutzen. Das Ergebniss ist meist nie wie erwartet. Ich verzweifle auch daran. Leider ...

FHEM Forum

Probleme bei der Anordnung

seb1fx

setstate

seb1fx

setstate

seb1fx

setstate