[gelöst FHEM-Tablet-UI] inline Formatierung, Verständnisfrage

[wkarl]

Hallo,

folgender code:

Code Auswählen Erweitern

<header><font size="+1">Teich</font></header>
<div class="centered container">

<div class="cell">
<div class="circlemenu inline right-space" data-type="circlemenu"
data-direction="right-half" data-circle-radius="60">
<ul class="menu">
<li><div data-type="push" data-icon="fa-clock-o"
data-background-icon="fa-circle"
   data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange"
></div></li>
   <li><div data-type="push"
    data-device="Irrigation_02_Sw_03" data-set="on-for-timer 900"
      data-icon="">15</div></li>
   <li><div data-type="push"
    data-device="Irrigation_02_Sw_03" data-set="on-for-timer 1800"
      data-icon="">30</div></li>
   <li><div data-type="push"
    data-device="Irrigation_02_Sw_03" data-set="on-for-timer 2700"
      data-icon="">45</div></li>
</ul>
</div>
<div class="big blue inline" data-type="label"
data-device="Irrigation_02_Sw_03" data-get="usrCountDown"
></div>
<div class="inline left-space" data-type="switch" data-device="Irrigation_02_Sw_03"
data-get-on="on" data-get-off="off"
data-icon="fa-circle-o-notch"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkgreen">
</div>
</div>

</div>


... ergibt die Darstellung wie sie im angehängten screenshot zu sehen ist.

Sollten die Objekte nicht auf einer Höhe sein (inline) ?

Danke für Eure Hilfe und ciao
walter

[setstate]

statt

Code Auswählen Erweitern

<div class="circlemenu inline right-space" data-type="circlemenu"

setzt

Code Auswählen Erweitern

<div class="cell circlemenu inline right-space" data-type="circlemenu"

[wkarl]

Danke, hat das erwartete Ergebnis gebracht.

Aber verstehen tue ich es nicht  . Habe eben noch mal gegoogled, aber keine Antwort gefunden. Sollte nicht das übergeordnete <div class=cell ... sich auf die Elemente der division auswirken?

Auch wenn die Frage trivial ist danke ich schon mal für eine klärende Antwort.

ciao walter

[setstate]

Circlemenu ist etwas eigen, weil es bringt einige feste Eigenschaften mit. Das sieht man in den Entwicklertools des Browsers, welche CSS Klassen wirksam werden. Die anderen Widgets übernehmen bereitwilliger Eigenschaften übergeordneter Elemente.
Ich muss aber gestehen, meisten komme ich auch nur mit der Try&Fail Methode zum Ziel.

[wkarl]

Hallo,

das scheint nicht nur bei circlemenu aufzutauchen, sondern wenn mehrere Objekte inline definiert werden. Bei folgendem Konstrukt

Code Auswählen Erweitern

<div class="cell">
<div class="large inline left right-space" type="label">Garten<br>hinten</div>
<div class="inline" data-type="switch"
    data-device="SwitchSocketPwr_12_Sw"
    data-get-on="on" date-get-off="off"
data-icon="fa-circle-o-notch"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkgreen">
      </div>
<div class="inline left-space">
<div class="large" data-type="label"
data-device="SwitchSocketPwr_12_Pwr" data-get="power" data-unit="W%0A" data-fix="1">
</div>
<div class="large" data-type="label"
data-device="SwitchSocketPwr_12_Pwr" data-get="energy" data-unit="Wh%0A" data-fix="1">
</div>
</div>
</div>


wird der switch nach unten versetzt angezeigt. Fügt man cell für jedes Objekt hinzu wird alles sauber ausgerichtet.

ciao walter

[christian-ruh]

Hallo wkarl,
Du hast folgenden Code geschrieben:

Code Auswählen Erweitern

<div class="big blue inline" data-type="label" data-device="Irrigation_02_Sw_03" data-get="usrCountDown"
Woher kommt das "usrCountDown"? Ich habe versucht das einzubinden und schaff das nicht.
Danke für Infos.
Gruß Christian