FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: wkarl am 06 August 2015, 08:32:27

Titel: [gelöst FHEM-Tablet-UI] inline Formatierung, Verständnisfrage
Beitrag von: wkarl am 06 August 2015, 08:32:27
Hallo,

folgender code:
<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
Titel: Antw:[FHEM-Tablet-UI] inline Formatierung, Verständnisfrage
Beitrag von: setstate am 06 August 2015, 19:15:30
statt
<div class="circlemenu inline right-space" data-type="circlemenu"

setzt

<div class="cell circlemenu inline right-space" data-type="circlemenu"
Titel: Antw:[FHEM-Tablet-UI] inline Formatierung, Verständnisfrage
Beitrag von: wkarl am 07 August 2015, 09:24:05
Danke, hat das erwartete Ergebnis gebracht.

Aber verstehen tue ich es nicht  :o. 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
Titel: Antw:[FHEM-Tablet-UI] inline Formatierung, Verständnisfrage
Beitrag von: setstate am 07 August 2015, 10:27:13
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.
Titel: Antw:[gelöst FHEM-Tablet-UI] inline Formatierung, Verständnisfrage
Beitrag von: wkarl am 08 August 2015, 09:46:04
Hallo,

das scheint nicht nur bei circlemenu aufzutauchen, sondern wenn mehrere Objekte inline definiert werden. Bei folgendem Konstrukt
<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
Titel: Antw:[gelöst FHEM-Tablet-UI] inline Formatierung, Verständnisfrage
Beitrag von: christian-ruh am 16 März 2016, 18:17:53
Hallo wkarl,
Du hast folgenden Code geschrieben:
<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