Folgendes Problem:
Mehrere Symbole unterschiedlicher Größe nebeneinander. Die Beschriftung soll aber ein eine Linie dargestellt werden.
Ausgangslage (Bild1)
<li data-row="2" data-col="1" data-sizey="2" data-sizex="2">
<div class="hbox">
<div class="vbox">
<div data-type="symbol" data-device="TerrassenTuer" data-icon="ftui-door" class="big"></div>
<div>Tür1</div>
</div>
<div class="vbox">
<div data-type="symbol" data-device="Eingangstuer" data-icon="ftui-door" class="big"></div>
<div>Tür2</div>
</div>
<div class="vbox">
<div data-type="symbol" data-icon="fa-rss" data-device='isAutoHomeStatus' class="green"></div>
<div>Mode</div>
</div>
</div>
</li>
Das rechte Symbol ist kleiner, dessen Text dadurch weiter oben.
Analyse (Bild2)
<li data-row="2" data-col="1" data-sizey="2" data-sizex="2">
<div class="hbox">
<div class="vbox">
<div data-type="symbol" data-device="TerrassenTuer" data-icon="ftui-door" class="big"></div>
<div>Tür1</div>
</div>
<div class="vbox">
<div data-type="symbol" data-device="Eingangstuer" data-icon="ftui-door" class="big bg-green"></div>
<div>Tür2</div>
</div>
<div class="vbox">
<div data-type="symbol" data-icon="fa-rss" data-device='isAutoHomeStatus' class="green bg-red"></div>
<div>Mode</div>
</div>
</div>
</li>
Durch Einfärben des Hintergrundes sieht man die Ursache. Die großen Symbole verbrauchen mehr Platz. Grund ist das übliche Hintergrundicon (rund oder eckig)
Abhilfe (Bild3)
<li data-row="2" data-col="1" data-sizey="2" data-sizex="2">
<div class="hbox">
<div class="vbox">
<div data-type="symbol" data-device="TerrassenTuer" data-icon="ftui-door" class="big height-narrow"></div>
<div>Tür1</div>
</div>
<div class="vbox">
<div data-type="symbol" data-device="Eingangstuer" data-icon="ftui-door" class="big bg-green height-narrow"></div>
<div>Tür2</div>
</div>
<div class="vbox">
<div data-type="symbol" data-icon="fa-rss" data-device='isAutoHomeStatus' class="green bg-red"></div>
<div>Mode</div>
</div>
</div>
</li>
Durch "height-narrow" presst man die großen Symbole enger zusammen.
Lösung (Bild4)
<li data-row="2" data-col="1" data-sizey="2" data-sizex="2">
<div class="hbox">
<div class="vbox">
<div data-type="symbol" data-device="TerrassenTuer" data-icon="ftui-door" class="big height-narrow"></div>
<div>Tür1</div>
</div>
<div class="vbox">
<div data-type="symbol" data-device="Eingangstuer" data-icon="ftui-door" class="big height-narrow"></div>
<div>Tür2</div>
</div>
<div class="vbox">
<div data-type="symbol" data-icon="fa-rss" data-device='isAutoHomeStatus' class="green"></div>
<div>Mode</div>
</div>
</div>
</li>
Alle Texte sind in einer Linie trotz unterschiedlicher Symbole