Ausrichtung Icons

[klausw]

Hallo zusammen,

ich experimentiere gerade mit den Beispielen in FTUI 2.2 insbesondere index_page_demo.html.

Zur Menüleiste habe ich ein dynamisches Icon zur Unwetterwarnung hinzugefügt. Dieses verhält sich, je nach "class" unterschiedlich.

Schiebe ich das Symbol an den Rand, so ist es mit den Raumicons auf einer Höhe

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="7" data-sizey="1">
<div data-type="pagebutton" data-url="#page_content1.html" data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content1.html" data-icon="fa-home" class="top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content2.html" data-load="#content2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content2.html" data-icon="fa-music" class="top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content3.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content3.html" data-device="ftuitest" data-states='["0","1"]' data-icons='["fa-sliders","fa-sliders activate"]' class="top-space inline"></div>
<div data-type="popup" data-height="600px" data-width="840px" class="top-space inline right right-space">
<div data-type="label" data-device="Unwetterzentrale" data-get="unwetterBild"></div>
<div class="dialog">
<header>Unwetter</header>
<div data-type="label" data-device="Unwetterzentrale" data-get="unwetterText"></div>
</div>
</div>
</li>


Wenn ich es jedoch direkt neben den Raumicons haben will, dann ist es in der Höhe versetzt.

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="7" data-sizey="1">
<div data-type="pagebutton" data-url="#page_content1.html" data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content1.html" data-icon="fa-home" class="top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content2.html" data-load="#content2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content2.html" data-icon="fa-music" class="top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content3.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content3.html" data-device="ftuitest" data-states='["0","1"]' data-icons='["fa-sliders","fa-sliders activate"]' class="top-space inline"></div>
<div data-type="popup" data-height="600px" data-width="840px" class="top-space inline">
<div data-type="label" data-device="Unwetterzentrale" data-get="unwetterBild"></div>
<div class="dialog">
<header>Unwetter</header>
<div data-type="label" data-device="Unwetterzentrale" data-get="unwetterText"></div>
</div>
</div>
</li>


Übersehe ich irgendwas oder ist das ein Bug?

Edit:

das Reading unwetterBild enthält hier:

Code Auswählen Erweitern

<img src="http://www.unwetterzentrale.de/images/icons/gewitter-gelb.gif" width="50" height="50" alt="unwetter">


Grüße
Klaus

[setstate]

So geht es

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="7" data-sizey="1">
<div data-type="pagebutton" data-url="#page_content1.html" data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content1.html" data-icon="fa-home" class="top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content2.html" data-load="#content2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content2.html" data-icon="fa-music" class="top-space inline"></div>
<div data-type="pagebutton" data-url="#page_content3.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_content3.html" data-device="ftuitest" data-states='["0","1"]' data-icons='["fa-sliders","fa-sliders activate"]' class="top-space inline"></div>
<div data-type="popup" data-height="600px" data-width="840px" class="top-space inline middle">
<div data-type="label" data-device="Unwetterzentrale" data-get="unwetterBild"></div>
<div class="dialog">
<header>Unwetter</header>
<div data-type="label" data-device="Unwetterzentrale" data-get="unwetterText"></div>
</div>
</div>
</li>



Das .fa-stack bringt ein vertical-align: middle; mit. Das braucht das "neue" Element auch. Durch .middle kann man das erreichen.
(habe ich auch nur durch probieren rausbekommen)

[klausw]

Super, klappt wunderbar, Danke. Darauf muss man erstmal kommen 

Ich versuche mich im Mom erst mal zurecht zu finden. Optisch gefällt mir das alles sehr gut.
Es scheint mehrere Möglichkeiten für Unterseiten zu geben pagetab, pagebutton...
Gibt es da eine bevorzugte Lösung?