Hallo,
seit dem letzten Update sind die Elemente horizontal verschoben.
<li data-row="1" data-col="8" data-sizex="4" data-sizey="1" class="halbTransparent">
<header>Modi</header>
<div class="center">
<div class="cell top-narrow">
<div data-type="button" data-fhem-cmd="set Wohnzimmer_Modi heimkommen" data-icon="fa-home"></div>
<div data-type="label" class="small darker ">heimkommen</div>
</div>
<div class="cell top-narrow">
<div data-type="button" data-fhem-cmd="set Wohnzimmer_Modi Kino" data-icon="fa-video-camera"></div>
<div data-type="label" class="small darker ">Kino</div>
</div>
<div class="cell top-narrow">
<div data-type="button" data-fhem-cmd="set Wohnzimmer_Modi alles_aus" data-icon="fa-flash"></div>
<div data-type="label" class="small darker">alles aus</div>
</div>
<div class="cell top-narrow">
<div data-type="push" data-device="Wohnzimmer_Modi" data-icon="mi-alarm" data-background-icon="fa-square" data-off-background-color="rgb(50,122,184)" data-off-color="rgb(255,255,255)" data-set-on="aufstehen"></div>
<div data-type="label" class="small ">aufstehen</div>
</div>
<div class="cell top-narrow">
<div data-type="push" data-device="Wohnzimmer_Modi" data-icon="fa-bed" data-background-icon="fa-square" data-off-background-color="rgb(50,122,184)" data-off-color="rgb(255,255,255)" data-set-on="schlafen"></div>
<div data-type="label" class="small ">schlafen</div>
</div>
<div class="cell narrow">
<div data-type="push" data-device="Wohnzimmer_Modi" data-icon="fa-film" data-background-icon="fa-square" data-off-background-color="rgb(50,122,184)" data-off-color="rgb(255,255,255)" data-set-on="Demo"></div>
<div data-type="label" class="small ">Demo</div>
</div>
</div>
</li>
EIn Vergleichsbild gibt es hier:
oben alt
unten neu (rechts ohne "top" bei narrow).
Oder wie kann man sonst horizontal zentrieren?
Gruß
TWART016
Das letzte icon hat nur "narrow" nicht "top-narrow", das muss schon einheitlich sein.
Des weiteren kannst du die ganzen data-type="label" weglassen.
Es reicht so, wenn das nicht mit FHEM verbunden werden soll.
<div class="small darker ">Kino</div>
Du kannst das auch so bauen.
1. eine vbox für das vertikale zentrieren
2. drinnen eine hbox mit gleichmässiger horizontalen Verteilung und etwas Platz links und rechts
<div class="vbox">
<div class="hbox items-space-between left-space right-space">
<div>
<div data-type="button" data-fhem-cmd="set Wohnzimmer_Modi heimkommen" data-icon="fa-home"></div>
<div class="small darker ">heimkommen</div>
</div>
<div>
<div data-type="button" data-fhem-cmd="set Wohnzimmer_Modi Kino" data-icon="fa-video-camera"></div>
<div class="small darker ">Kino</div>
</div>
<div>
<div data-type="button" data-fhem-cmd="set Wohnzimmer_Modi alles_aus" data-icon="fa-flash"></div>
<div class="small darker">alles aus</div>
</div>
<div>
<div data-type="push" data-device="Wohnzimmer_Modi" data-icon="mi-alarm" data-background-icon="fa-square" data-off-background-color="rgb(50,122,184)" data-off-color="rgb(255,255,255)" data-set-on="aufstehen"></div>
<div class="small">aufstehen</div>
</div>
<div>
<div data-type="push" data-device="Wohnzimmer_Modi" data-icon="fa-bed" data-background-icon="fa-square" data-off-background-color="rgb(50,122,184)" data-off-color="rgb(255,255,255)" data-set-on="schlafen"></div>
<div class="small">schlafen</div>
</div>
<div>
<div data-type="push" data-device="Wohnzimmer_Modi" data-icon="fa-film" data-background-icon="fa-square" data-off-background-color="rgb(50,122,184)" data-off-color="rgb(255,255,255)" data-set-on="Demo"></div>
<div class="small">Demo</div>
</div>
</div>
</div>
Das mit vbox und hbox funktioniert das wunderbar. Danke.
In Templates wirkt die Formatierung jedoch nicht. In einem Template wird der Text nicht zentriert angezeigt.
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="halbTransparent">
<header>Uhrzeit</header>
<div class="vbox bottom-space">
<div data-type="clock" data-format="H:i:s" class="bigger"></div>
<div data-type="clock" data-format="l d-m-Y" class="cell thin narrow"></div>
</div>
</li>
mit Template habe ich damit eingebunden. Der Code in der uhr.html ist gleich.
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="halbTransparent" data-template="Template/uhr.html"></li>
im Gridster li fehlt noch ein .vbox. Das wird automatisch beim initGridster gemacht. Die Templates werden aber erst nach dem initGridster aufgelöst.
template:
<html>
<body>
<header>Uhrzeit</header>
<div class="vbox bottom-space">
<div data-type="clock" data-format="H:i:s" class="bigger"></div>
<div data-type="clock" data-format="l d-m-Y" class="cell thin narrow"></div>
</div>
</body>
</html>
main
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="halbTransparent vbox" data-template="Template/uhr.html"></li>
Danke, geht.