FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: ulli am 10 Dezember 2017, 20:30:54

Titel: zwei Zeilen eng aneinander
Beitrag von: ulli am 10 Dezember 2017, 20:30:54
ich bin am verzweifeln. Ich schaffe es einfach nicht in einer Row zwei Werte (Temperatur und Feuchte) eng untereinander zu schreiben und damit die gesamte Row in der Höhe klein zu halten.


<div class="row">

<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["closed","off","open","on","undefined"]' data-colors='["blue","blue","red","red","red"]' data-color="blue" data-icon="var_icon" class="big compressed"></div>
</div>

<div class="cell-20 left-align">
<div class="big">var_name</div>
</div>

<div class="cell-60 right-align">
<div class="row">
<div class="cell">Temperatur:</div>
<div class="cell" data-type="label" data-device="var_device" data-get="temperature" data-limits='[-73,15,25]' data-colors='["cornflowerblue","green","firebrick"]' data-unit="%B0C"></div>
</div>
<div class="row">
<div class="cell">Luftfeuchigkeit:</div>
<div class="cell" data-type="label" data-device="var_device" data-get="humidity" data-limits='[0,40,60]' data-colors='["cornflowerblue","green","firebrick"]' data-unit="%"></div>
</div>
</div>

<div class="cell">
</div>
<div class="cell right-align"></div>

</div>
Titel: Antw:zwei Zeilen eng aneinander
Beitrag von: MKeY am 10 Dezember 2017, 21:58:04
die class "Cell" ist mit einem Außenrahmen von 10px standardmäßig definiert, damit ist der Abstand fest
probier es mal ungetestet so, danach ggf mit centered oder top-space usw anordnen

<div class="row">

<div class="cell left-align left-space">
<div data-type="symbol" data-device="var_device" data-states='["closed","off","open","on","undefined"]' data-colors='["blue","blue","red","red","red"]' data-color="blue" data-icon="var_icon" class="big compressed"></div>
</div>

<div class="cell-20 left-align">
<div class="big">var_name</div>
</div>

<div class="cell-60 right-align">
<div class="row">
<div class="">Temperatur:</div>
<div class="" data-type="label" data-device="var_device" data-get="temperature" data-limits='[-73,15,25]' data-colors='["cornflowerblue","green","firebrick"]' data-unit="%B0C"></div>
</div>
<div class="row">
<div class="">Luftfeuchigkeit:</div>
<div class="" data-type="label" data-device="var_device" data-get="humidity" data-limits='[0,40,60]' data-colors='["cornflowerblue","green","firebrick"]' data-unit="%"></div>
</div>
</div>

<div class="cell">
</div>
<div class="cell right-align"></div>

</div>