Seite drucken - Probleme bei der Anordnung

Titel: Probleme bei der Anordnung
Beitrag von: seb1fx am 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>

Titel: Antw:Probleme bei der Anordnung
Beitrag von: setstate am 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.

Titel: Antw:Probleme bei der Anordnung
Beitrag von: seb1fx am 31 Juli 2017, 11:24:18

wie kann man es alternativ machen?

Titel: Antw:Probleme bei der Anordnung
Beitrag von: setstate am 31 Juli 2017, 11:32:20

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

Titel: Antw:Probleme bei der Anordnung
Beitrag von: seb1fx am 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>

Titel: Antw:Probleme bei der Anordnung
Beitrag von: setstate am 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

FHEM => Frontends => TabletUI => Thema gestartet von: seb1fx am 31 Juli 2017, 10:35:50