Hallo,
ich habe eben ein Update von 2.6.17 zu 2.6.27 gemacht.
Jetzt sind die Abstände viel zu groß. Unten kommen nochmal einige Widgets.
Gab es in der Richung eine Änderung in den letzten Releases?
<header class="container round">Onkyo AV Receiver</header>
<div class="hbox top-narrow">
<div class="vbox">
<div data-type="label">Lautstärke Zone 1</div>
</div>
<div class="vbox grow-2">
<div data-type="spinner" data-device="avr" data-get="volume" data-set="volume" data-icon-left="fa-volume-down" data-icon-right="fa-volume-up" class="centered value positiononly"></div>
</div>
</div>
<div class="hbox top-narrow-2x">
<div class="vbox">
<div data-type="label">Lautstärke Zone 2</div>
</div>
<div class="vbox grow-2">
<div data-type="spinner" data-device="avr_zone2" data-get="volume" data-set="volume" data-icon-left="fa-volume-down" data-icon-right="fa-volume-up" class="centered value positiononly"></div>
</div>
</div>
<div class="hbox top-narrow-2x">
<div class="vbox">
<div data-type="label" class="inline">Subwoofer</div>
</div>
<div class="vbox grow-2">
<div data-type="spinner" data-device="avr" data-get="subwoofer-temporary-level" data-set="subwoofer-temporary-level" class="centered value" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-min="-15" data-max="12"></div>
</div>
</div>
<div class="hbox items-space-around">
<div class="vbox top-narrow-2x">
<div>Zone1</div>
<div data-type="switch" data-device="avr" data-get="power" data-icon="fa-power-off" data-on-color="white" data-off-color="grey" data-background-icon="-"></div>
</div>
<div class="vbox top-narrow-2x">
<div>Zone2</div>
<div data-type="switch" data-device="avr_zone2" data-get="power" data-icon="fa-power-off" data-on-color="white" data-off-color="grey" data-background-icon="-"></div>
</div>
<div class="vbox grow-3">
<div data-type="select" data-device="avr" data-set="input" data-get="input" data-items='["video6","12","dvd","video2","video3","fm","network","2E"]' data-alias='["PC","TV","Intel NUC","mobil","KODI","Radio","AV Receiver Media","Bluetooth"]' class="inline w3x" data-on-background-color="#0066FF"></div>
</div>
<div class="vbox grow-2">
<div data-type="select" data-device="avr" data-set="listening-mode" data-get="listening-mode" data-items='["all-ch-stereo","pliix-movie"]' data-alias='["Stereo","5.1"]' class="inline w2x" data-on-background-color="#0066FF"></div>
</div>
</div>
<div class="hbox items-space-around top-narrow-2x">
<div data-type="switch" data-device="avr" data-get="input" data-get-on="video6" data-get-off="!on" data-set="input" data-icon="oa-it_pc" data-on-background-color="rgb(191, 191, 191)"></div>
<div data-type="switch" data-device="avr" data-get="input" data-get-on="12" data-get-off="!on" data-set="input" data-icon="mi-tv" data-on-background-color="rgb(191, 191, 191)"></div>
<div data-type="switch" data-device="avr" data-get="input" data-get-on="2E" data-get-off="!on" data-set="input" data-icon="fa-bluetooth" data-on-background-color="rgb(191, 191, 191)"></div>
<div data-type="switch" data-device="avr" data-get="input" data-get-on="2E" data-get-off="!on" data-set="input" data-icon="oa-it_radio" data-on-background-color="rgb(191, 191, 191)"></div>
<div data-type="image" data-size="56px" data-url="./images/Intel_NUC.png" onclick="ftui.setFhemStatus('set avr input dvd')"></div>
<div data-type="image" data-size="46px" data-url="./images/Kodi_logo.png" onclick="ftui.setFhemStatus('set avr input video3')"></div>
</div>
Gruß
TWART016
Eine vbox / hbox nimmt immer 100% Höhe ihrer Parents an. Also hat eine hbox innerhalb von <li></li> 100%, also 1mal die Höhe von <li>. Wenn man mehrere hbox reinnimmt, hat jede 100%. Bei 7 -> 700% Höhe.
Ich könnte versuchen, wie bei "row" einen Automatismus einzubauen, also bei 3 gleichen bekommt jede 33,3% usw.
Eine einfache Lösung ist, den Bulk an hboxen in eine vbox zu kapseln.
<div class="vbox">
<div class="hbox"></div>
<div class="hbox"></div>
<div class="hbox"></div>
</div>
In dem Fall hat das geklappt.
Ich habe aber noch ein anderes Gridster, wo noch mehr vbox und hbox gibt. Wenn ich dort die hbox in eine vbox kapsele, wird jede der 3 hboxen in 33% unterteilt. Das Style hat keinen Einfluss mehr seit 2.6.27. Mit 2.6.17 hat es noch geklappt.
<div class="hbox" style="height:540px" >
<div class="vbox grow-3">
<div class="hbox">
<div data-type="label" class="inline big">Titel</div>
<div data-type="label" class="inline big" data-device="SB_Player_PCT" data-get="playlistCurrentTrack"></div>
<div data-type="label" class="inline big">von</div>
<div data-type="label" class="inline big" data-device="SB_Player_PCT" data-get="playlistTracks"></div>
</div>
<div data-type="itunes_artwork" data-device="SB_Player_PCT" data-size="150" class="" data-stripbrackets="true" data-notfoundimg="SB_Player_PCT:COVERARTURL" data-get='["currentArtist","currentTitle"]'></div>
<div class="container cell scrolltext label-border">
<div data-type="label" class="inline bigger" data-device="SB_Player_PCT" data-get="currentTitle"></div>
<br>
<div data-type="label" data-device="SB_Player_PCT" class="big" data-get="currentArtist"></div>
<div data-type="label" data-device="SB_Player_PCT" data-get="currentAlbum"></div>
</div>
<div class="hbox top-space">
<div data-type="label" data-device="SB_Player_PCT" data-get="currentTrackPosition" data-substitution="toMinFromSec()" class="right-space"></div>
<div data-type="slider" data-device="SB_Player_PCT" class="horizontal" data-width="150" data-max="ftuiDuration" data-get="currentTrackPosition" data-set="currentTrackPosition"></div>
<div data-type="label" data-device="SB_Player_PCT" data-get="duration" data-substitution="toMinFromSec()" class="left-space"></div>
</div>
</div>
<div class="vbox grow-3">
<div class="hbox">
<div Class="vbox">
<div data-type="label" class="cell">Playlists</div>
<div data-type="select" data-device="SB_Player_PCT" data-delimiter="," data-list="SERVERPLAYLISTS" data-set="playlists" data-get="playlists" class="w4x"></div>
</div>
<div Class="vbox">
<div data-type="label" class="cell">Favoriten</div>
<div data-type="select" data-device="SB_Player_PCT" data-delimiter="," data-list="FAVSTR" data-set="playlists" data-get="playlists" class="w4x"></div>
</div>
</div>
<div class="hbox top-narrow-3x">
<div class="vbox grow-9 top-space-2x large">PCT</div>
<div class="vbox grow-9">
<div data-type="label" data-device="WinPCT" data-get="volume" class="large top-space-2x right-narrow"></div>
</div>
<div class="vbox grow-6"></div>
</div>
<div class="hbox top-narrow-2x">
<div data-type="switch" data-device="WinPCT" class="" data-background-icon="-" data-off-color="#505050" data-on-color="orange" data-icon="oa-audio_volume_mute" data-get="mute" data-set-off="mute off" data-set-on="mute on"></div>
<div data-type="push" data-device="WinPCT" data-set="VolumeDown" class="left-narrow-3x bigger" data-get="volume" data-icon="fa-volume-down" data-background-icon="-"></div>
<div data-type="slider" data-device="WinPCT" class="horizontal left-narrow-3x right-narrow-3x" data-get="volume" data-set="volume" data-min="0" data-max="100" data-width="145"></div>
<div data-type="push" data-device="WinPCT" data-set="VolumeUp" class="bigger right-narrow-10" data-get="volume" data-icon="fa-volume-up" data-background-icon="-"></div>
</div>
<div class="hbox top-narrow-3x">
<div class="vbox grow-9 top-space-2x large">SqueezePlay</div>
<div class="vbox grow-9">
<div data-type="label" data-device="SB_Player_PCT" data-get="volume" class="large top-space-2x right-narrow"></div>
</div>
<div class="vbox grow-6"></div>
</div>
<div class="hbox top-narrow-2x right-narrow">
<div data-type="switch" data-device="SB_Player_PCT" class="" data-background-icon="-" data-off-color="#505050" data-on-color="orange" data-icon="oa-audio_volume_mute" data-get="Mute" data-set-off="Mute 0" data-set-on="Mute 1" data-get-on="1" data-get-off="0"></div>
<div data-type="push" data-set="VolumeDown" class="left-narrow-3x bigger" data-get="volume" data-icon="fa-volume-down" data-background-icon="-" data-device="SB_Player_PCT"></div>
<div data-type="slider" data-device="SB_Player_PCT" class="horizontal left-narrow-3x right-narrow-3x" data-get="volume" data-set="volume" data-min="0" data-max="100" data-width="145"></div>
<div data-type="push" data-set="VolumeUp" class="bigger right-narrow-5" data-get="volume" data-icon="fa-volume-up" data-background-icon="-" data-device="SB_Player_PCT"></div>
</div>
<div class="hbox items-space-around top-narrow-2x">
<div class="vbox">
<div data-type="switch" data-device="SB_Player_iPhoneTim" class="cell narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_PCT asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">iPhoneTim</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_Kueche" class="cell narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_PCT asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">Küche</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_Bad" class="cell narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_PCT asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">Bad</div>
</div>
</div>
</div>
</div>
<div class="hbox items-space-around" style="height:140px">
<div data-type="popup" data-height="600" data-width="950" class="thin centered">
<div data-type="label" class="darker tall left-narrow-2x right-narrow">LMS</div>
<div class="dialog">
<header>Squeeze PCT</header>
<iframe style=" border:solid 1px #777 " width="99%" height="95%" frameborder="0" src="http://192.168.178.14:9000"></iframe>
</div>
</div>
<div data-type="push" data-device="SB_Player_PCT" class="" data-icon="-" data-background-icon="fa-step-backward" data-off-color="#505050" data-set-on="prev"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="playStatus" data-get-on="playing" data-get-off="!on" data-icon="fa-play" data-background-icon="fa-play" data-background-icon="-" data-set-on="play" data-set-off="pause" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="playStatus" data-get-on="paused" data-get-off="!on" data-icon="-" data-background-icon="fa-pause" data-set-on="pause" data-set-off="play" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="playStatus" data-get-on="!stopped" data-get-off="playing" data-icon="-" data-background-icon="fa-stop" data-set-on="stop" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="push" data-device="SB_Player_PCT" class="" data-icon="-" data-background-icon="fa-step-forward" data-off-color="#505050" data-set-on="next"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="left-narrow-5 large" data-get="repeat" data-get-on='["off","one","all"]' data-set-states='["repeat one","repeat all","repeat off"]' data-icons='["fa-repeat","fa-repeat","fa-repeat"}' data-background-icons='["fa-repeat","fa-repeat","fa-repeat"]' data-background-colors='["rgba(147, 147, 147,.3)","rgba(147, 147, 147,.8)","#AA6900"]'></div>
<div data-type="switch" data-device="SB_Player_PCT" class="right-narrow cell large" data-get="shuffle" data-get-on='["off","song","album"]' data-set-states='["shuffle song","shuffle album","shuffle off"]' data-icons='["fa-random","fa-random","fa-random"}' data-background-icons='["fa-random","fa-random","fa-random"]' data-background-colors='["rgba(147, 147, 147,.3)","#AA6900","rgba(147, 147, 147,.8)"]'></div>
</div>
<div class="hbox top-narrow-2x" style="height:140px">
<div class="vbox top-space right-space-2x">
<div data-type="push" data-device="SB_Player_PCT" data-icon="" data-background-icon="" class="darker" data-set-on="unsync" data-on-color="#505050">unsync</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="syncVolume" data-get-on="1" data-get-off="0" data-set-on="syncVolume 1" data-set-off="syncVolume 0" data-icon="fa-volume-off" data-background-icon="-" data-on-color="rgb(191, 191, 191)" data-off-color="#505050"></div>
<div class="top-narrow darker">Volume sync</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="MusikSyncMode" data-get="state" data-warn="warn" data-icon="fa-search warn" data-off-color="#505050" data-on-color="rgb(191, 191, 191)" data-background-icon="fa-search-o"></div>
<div class="top-narrow darker">rescan</div>
</div>
<div class="vbox">
<div data-type="popup" data-height="90%" data-width="90%" class="thin centered">
<div data-type="button" data-icon="fa-bars" data-background-icon="fa-bars-o" data-off-color="rgb(191, 191, 191)" data-on-color="#505050"></div>
<div class="dialog halbTransparent">
<header>Musik PCT</header>
<div data-type="medialist" data-device="SB_Player_PCT" data-set="track" data-get="ftuiMedialist" data-pos="playlistCurrentTrack" class="autoscroll index1" data-width="99%" data-height="95%"></div>
</div>
</div>
<div class="top-narrow darker">Playlist</div>
</div>
</div>
Edit: Oder wie empfehlst du mehrere h- und vboxen mit unterschiedlichen Größen zu erstellen?
Immer eine einzelne vbox bzw. hbox als Hauptcontainer, nie sofort mit einer Liste von Boxen starten. Und anstatt style="height=---", class="grow-3" usw. benutzen.
grow-3 + grow-1 + grow-1 bedeutet: 3+1+1=5 -> 3/5 + 1/5 +1/5
grow-2 Elemente nehmen das doppelte von grow-1 Elementen ein. grow-3 Elemente nehmen das dreifache von grow-1 Elementen ein. usw.
<li data-row="1" data-col="10" data-sizey="10" data-sizex="10">
<header class="container round">Onkyo AV Receiver</header>
<div class="vbox">
<div class="hbox bg-green grow-3">
<div class="vbox grow-3">
<div class="hbox">
<div data-type="label" class="inline big">Titel</div>
<div data-type="label" class="inline big" data-device="SB_Player_PCT" data-get="playlistCurrentTrack"></div>
<div data-type="label" class="inline big">von</div>
<div data-type="label" class="inline big" data-device="SB_Player_PCT" data-get="playlistTracks"></div>
</div>
<div data-type="itunes_artwork" data-device="SB_Player_PCT" data-size="150" class="" data-stripbrackets="true" data-notfoundimg="SB_Player_PCT:COVERARTURL" data-get='["currentArtist","currentTitle"]'></div>
<div class="container cell scrolltext label-border">
<div data-type="label" class="inline bigger" data-device="SB_Player_PCT" data-get="currentTitle"></div>
<br>
<div data-type="label" data-device="SB_Player_PCT" class="big" data-get="currentArtist"></div>
<div data-type="label" data-device="SB_Player_PCT" data-get="currentAlbum"></div>
</div>
<div class="hbox top-space">
<div data-type="label" data-device="SB_Player_PCT" data-get="currentTrackPosition" data-substitution="toMinFromSec()" class="right-space"></div>
<div data-type="slider" data-device="SB_Player_PCT" class="horizontal" data-width="150" data-max="ftuiDuration" data-get="currentTrackPosition" data-set="currentTrackPosition"></div>
<div data-type="label" data-device="SB_Player_PCT" data-get="duration" data-substitution="toMinFromSec()" class="left-space"></div>
</div>
</div>
<div class="vbox grow-3">
<div class="hbox">
<div Class="vbox">
<div data-type="label" class="cell">Playlists</div>
<div data-type="select" data-device="SB_Player_PCT" data-delimiter="," data-list="SERVERPLAYLISTS" data-set="playlists" data-get="playlists" class="w4x"></div>
</div>
<div Class="vbox">
<div data-type="label" class="cell">Favoriten</div>
<div data-type="select" data-device="SB_Player_PCT" data-delimiter="," data-list="FAVSTR" data-set="playlists" data-get="playlists" class="w4x"></div>
</div>
</div>
<div class="hbox top-narrow-3x">
<div class="vbox grow-9 top-space-2x large">PCT</div>
<div class="vbox grow-9">
<div data-type="label" data-device="WinPCT" data-get="volume" class="large top-space-2x right-narrow"></div>
</div>
<div class="vbox grow-6"></div>
</div>
<div class="hbox top-narrow-2x">
<div data-type="switch" data-device="WinPCT" class="" data-background-icon="-" data-off-color="#505050" data-on-color="orange" data-icon="oa-audio_volume_mute" data-get="mute" data-set-off="mute off" data-set-on="mute on"></div>
<div data-type="push" data-device="WinPCT" data-set="VolumeDown" class="left-narrow-3x bigger" data-get="volume" data-icon="fa-volume-down" data-background-icon="-"></div>
<div data-type="slider" data-device="WinPCT" class="horizontal left-narrow-3x right-narrow-3x" data-get="volume" data-set="volume" data-min="0" data-max="100" data-width="145"></div>
<div data-type="push" data-device="WinPCT" data-set="VolumeUp" class="bigger right-narrow-10" data-get="volume" data-icon="fa-volume-up" data-background-icon="-"></div>
</div>
<div class="hbox top-narrow-3x">
<div class="vbox grow-9 top-space-2x large">SqueezePlay</div>
<div class="vbox grow-9">
<div data-type="label" data-device="SB_Player_PCT" data-get="volume" class="large top-space-2x right-narrow"></div>
</div>
<div class="vbox grow-6"></div>
</div>
<div class="hbox top-narrow-2x right-narrow">
<div data-type="switch" data-device="SB_Player_PCT" class="" data-background-icon="-" data-off-color="#505050" data-on-color="orange" data-icon="oa-audio_volume_mute" data-get="Mute" data-set-off="Mute 0" data-set-on="Mute 1" data-get-on="1" data-get-off="0"></div>
<div data-type="push" data-set="VolumeDown" class="left-narrow-3x bigger" data-get="volume" data-icon="fa-volume-down" data-background-icon="-" data-device="SB_Player_PCT"></div>
<div data-type="slider" data-device="SB_Player_PCT" class="horizontal left-narrow-3x right-narrow-3x" data-get="volume" data-set="volume" data-min="0" data-max="100" data-width="145"></div>
<div data-type="push" data-set="VolumeUp" class="bigger right-narrow-5" data-get="volume" data-icon="fa-volume-up" data-background-icon="-" data-device="SB_Player_PCT"></div>
</div>
<div class="hbox items-space-around top-narrow-2x">
<div class="vbox">
<div data-type="switch" data-device="SB_Player_iPhoneTim" class="cell narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_PCT asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">iPhoneTim</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_Kueche" class="cell narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_PCT asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">Küche</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_Bad" class="cell narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_PCT asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">Bad</div>
</div>
</div>
</div>
</div>
<div class="hbox items-space-around bg-blue grow-1">
<div data-type="popup" data-height="600" data-width="950" class="thin centered">
<div data-type="label" class="darker tall left-narrow-2x right-narrow">LMS</div>
<div class="dialog">
<header>Squeeze PCT</header>
</div>
</div>
<div data-type="push" data-device="SB_Player_PCT" class="" data-icon="-" data-background-icon="fa-step-backward" data-off-color="#505050" data-set-on="prev"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="playStatus" data-get-on="playing" data-get-off="!on" data-icon="fa-play" data-background-icon="fa-play" data-background-icon="-" data-set-on="play" data-set-off="pause" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="playStatus" data-get-on="paused" data-get-off="!on" data-icon="-" data-background-icon="fa-pause" data-set-on="pause" data-set-off="play" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="playStatus" data-get-on="!stopped" data-get-off="playing" data-icon="-" data-background-icon="fa-stop" data-set-on="stop" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="push" data-device="SB_Player_PCT" class="" data-icon="-" data-background-icon="fa-step-forward" data-off-color="#505050" data-set-on="next"></div>
<div data-type="switch" data-device="SB_Player_PCT" class="left-narrow-5 large" data-get="repeat" data-get-on='["off","one","all"]' data-set-states='["repeat one","repeat all","repeat off"]' data-icons='["fa-repeat","fa-repeat","fa-repeat"}' data-background-icons='["fa-repeat","fa-repeat","fa-repeat"]' data-background-colors='["rgba(147, 147, 147,.3)","rgba(147, 147, 147,.8)","#AA6900"]'></div>
<div data-type="switch" data-device="SB_Player_PCT" class="right-narrow cell large" data-get="shuffle" data-get-on='["off","song","album"]' data-set-states='["shuffle song","shuffle album","shuffle off"]' data-icons='["fa-random","fa-random","fa-random"}' data-background-icons='["fa-random","fa-random","fa-random"]' data-background-colors='["rgba(147, 147, 147,.3)","#AA6900","rgba(147, 147, 147,.8)"]'></div>
</div>
<div class="hbox top-narrow-2x bg-red grow-1">
<div class="vbox top-space right-space-2x">
<div data-type="push" data-device="SB_Player_PCT" data-icon="" data-background-icon="" class="darker" data-set-on="unsync" data-on-color="#505050">unsync</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_PCT" class="" data-get="syncVolume" data-get-on="1" data-get-off="0" data-set-on="syncVolume 1" data-set-off="syncVolume 0" data-icon="fa-volume-off" data-background-icon="-" data-on-color="rgb(191, 191, 191)" data-off-color="#505050"></div>
<div class="top-narrow darker">Volume sync</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="MusikSyncMode" data-get="state" data-warn="warn" data-icon="fa-search warn" data-off-color="#505050" data-on-color="rgb(191, 191, 191)" data-background-icon="fa-search-o"></div>
<div class="top-narrow darker">rescan</div>
</div>
<div class="vbox">
<div data-type="popup" data-height="90%" data-width="90%" class="thin centered">
<div data-type="button" data-icon="fa-bars" data-background-icon="fa-bars-o" data-off-color="rgb(191, 191, 191)" data-on-color="#505050"></div>
<div class="dialog halbTransparent">
<header>Musik PCT</header>
<div data-type="medialist" data-device="SB_Player_PCT" data-set="track" data-get="ftuiMedialist" data-pos="playlistCurrentTrack" class="autoscroll index1" data-width="99%" data-height="95%"></div>
</div>
</div>
<div class="top-narrow darker">Playlist</div>
</div>
</div>
</div>
</li>
Aber unter Safari klappte es bei mir bei deinem Code auch mit style="height..."
PS.: dein Username/PW deiner Squeezebox habe ich mal bei mir weggelassen ;)
Danke, damit hat es funktioniert.
Ähh...ja vergessen die Daten zu löschen. Jetzt habe ich das Kennwort zu ändern.
Hallo,
ich habe auch seit dem Update eine etwas verzogene Seite. Ich nutze von Paul79 die Wettertrend anzeige. Diese ist seit dem Update leider etwas verzogen.
Habe hier bei euch nicht so durch blicken können.
Hier mein code:
<div class="sheet">
<div class="row">
<div class="cell-1-3">
<div class="row">
<div class="hbox">
<div class="compressed normal shadow inline" data-type="symbol" data-icon="wi wi-thermometer" data-off-color="#999"></div>
<div class="large inline semitransparenttext" data-type="label" data-device="Aussen_Thermometer" data-get="temperature" data-limits='[-73,0,30]' data-colors='["#6699FF","#FAA460","#FF0000"]' data-unit="%B0C%0A" ></div>
</div>
<div data-type="label" class="inline shadow darker">Temperatur</div>
<div class="hbox">
<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statTemperatureTendency" data-refperiod="1" class="inline large"></div>
<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statTemperatureTendency" data-refperiod="2" class="inline large"></div>
<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statTemperatureTendency" data-refperiod="3" class="inline large"></div>
</div>
</div>
</div>
<div class="cell-1-3">
<div class="row">
<div class="hbox">
<div class="compressed normal shadow inline" data-type="symbol" data-icon="wi wi-humidity" data-off-color="#999"></div>
<div class="large inline semitransparenttext" data-type="label" data-device="Aussen_Thermometer" data-limits='[-73,0,100]' data-colors='["#6699FF","#FAA460","#FF0000"]' data-get="humidity" data-unit="%"></div>
</div>
<div data-type="label" class="inline shadow darker">Luftfeuchte</div>
<div class="hbox">
<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statHumidityTendency" data-refperiod="1" class="inline large"></div>
<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statHumidityTendency" data-refperiod="2" class="inline large"></div>
<div data-type="klimatrend" data-device="Aussen_Thermometer" data-get="statHumidityTendency" data-refperiod="3" class="inline large"></div>
</div>
</div>
</div>
<div class="cell-1-3">
<div class="row">
<div class="hbox">
<div class="compressed normal shadow inline " data-type="symbol" data-icon="wi wi-thermometer-exterior" data-off-color="#999"></div>
<div class="compressed normal shadow inline left-narrow" data-type="symbol" data-icon="wi wi-raindrops" data-off-color="#999"></div>
<div class="large inline semitransparenttext" data-type="label" data-device="Aussen_Thermometer" data-get="dewpoint" data-limits='[-73,0,100]' data-colors='["#6699FF","#FAA460","#FF0000"]' data-unit="%B0C%0A"></div>
</div>
<div data-type="label" class="inline shadow darker">Taupunkt</div>
<div class="hbox">
<br>
</div>
</div>
</div>
</div>
</div>
jemand eine Idee an was das liegen könnte?
Danke und Gruß,
Fixel
EDIT: Nach längerem Probieren/lesen und verstehen, habe ich eine vbox um meine hboxen gepackt. Dies führte zum schon genannten Ergebnis, es funktioniert nun wieder alles.
Danke!
Ein weiteres Beispiel, alt vs. neu.
Auch hier scheint es bei den Abständen große Unterschiede zu geben.
Was mit noch aufgefallen ist:
Änderungen werden mit der URL nicht mehr angezeigt:
http://192.168.178.11:8083/fhem/tablet/t_index.html
nur noch so:
http://192.168.178.11:8083/fhem/ftui/t_index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="page" id="t_musik_kueche">
<section>
<div class="hbox">
<div class="vbox grow-3">
<header class="top-narrow big">SqueezePlay Küche1</header>
<div class="hbox top-space">
<div Class="vbox grow-3 left-space">
<div class="hbox">
<div data-type="label" class="inline big">Titel</div>
<div data-type="label" class="inline big" data-device="SB_Player_Kueche" data-get="playlistCurrentTrack"></div>
<div data-type="label" class="inline big">von</div>
<div data-type="label" class="inline big" data-device="SB_Player_Kueche" data-get="playlistTracks"></div>
</div>
<div data-type="itunes_artwork" data-device="SB_Player_Kueche" data-size="250" class="top-space" data-stripbrackets="true" data-notfoundimg="SB_Player_Kueche:COVERARTURL" data-get='["currentArtist","currentTitle"]'></div>
<div class="container cell scrolltext label-border">
<div data-type="label" class="inline bigger" data-device="SB_Player_Kueche" data-get="currentTitle"></div>
<br>
<div data-type="label" data-device="SB_Player_Kueche" class="big" data-get="currentArtist"></div>
<div data-type="label" data-device="SB_Player_Kueche" data-get="currentAlbum"></div>
</div>
<div class="hbox top-space">
<div data-type="label" data-device="SB_Player_Kueche" data-get="currentTrackPosition" data-substitution="toMinFromSec()" class="right-space"></div>
<div data-type="slider" data-device="SB_Player_Kueche" class="horizontal" data-width="200" data-max="ftuiDuration" data-get="currentTrackPosition" data-set="currentTrackPosition"></div>
<div data-type="label" data-device="SB_Player_Kueche" data-get="duration" data-substitution="toMinFromSec()" class="left-space"></div>
</div>
</div>
<div Class="vbox grow-4">
<div class="hbox top-narrow">
<div class="vbox">
<div data-type="label" class="big">Master: </div>
</div>
<div class="vbox grow-3 items-left">
<div data-type="label" data-device="SB_Player_Kueche" data-get="Master" class="big"></div>
</div>
</div>
<div class="hbox top-space">
<div class="vbox">
<div data-type="label" class="big">Slaves: </div>
</div>
<div class="vbox grow-3 items-left">
<div data-type="label" data-device="SB_Player_Kueche" data-get="Slaves" class="big"></div>
</div>
</div>
<div class="hbox">
<div class="vbox grow-9"></div>
<div class="vbox grow-9">
<div data-type="label" data-device="SB_Player_Kueche" data-get="volume" class="large top-space-2x right-narrow"></div>
</div>
<div class="vbox grow-6"></div>
</div>
<div class="hbox top-narrow-5x">
<div data-type="switch" data-device="SB_Player_Kueche" class="bigger" data-background-icon="-" data-off-color="#505050" data-on-color="orange" data-icon="oa-audio_volume_mute" data-get="Mute" data-set-off="Mute 0" data-set-on="Mute 1" data-get-on="1" data-get-off="0"></div>
<div data-type="push" data-set="VolumeDown" class=" left-narrow-2x tall thin" data-get="volume" data-icon="fa-volume-down" data-background-icon="-" data-device="SB_Player_Kueche"></div>
<div data-type="slider" data-device="SB_Player_Kueche" class="horizontal left-narrow-4x right-narrow-3x" data-get="volume" data-set="volume" data-min="0" data-max="100" data-width="205"></div>
<div data-type="push" data-set="VolumeUp" class="tall thin " data-get="volume" data-icon="fa-volume-up" data-background-icon="-" data-device="SB_Player_Kueche"></div>
</div>
<!--
<div class="row left-narrow-3x right-narrow-3x top-narrow-2x">
<div data-type="switch" data-device="SB_Player_Kueche" class="inline bigger left-narrow-3x right-narrow" data-background-icon="-" data-off-color="#505050" data-on-color="orange" data-icon="oa-audio_volume_mute" data-get="Mute" data-set-off="Mute 0" data-set-on="Mute 1" data-get-on="1" data-get-off="0"></div>
<div data-type="push" data-set="VolumeDown" class="tall thin left-narrow-2x right-narrow inline" data-get="volume" data-icon="fa-volume-down" data-background-icon="-" data-device="SB_Player_Kueche"></div>
<div data-type="slider" data-device="SB_Player_Kueche" class="inline top-narrow-3x left-narrow right-narrow-2x horizontal" data-get="volume" data-set="volume" data-min="0" data-max="100" data-width="165"></div>
<div data-type="push" data-set="VolumeUp" class="tall thin left-narrow right-narrow-2x inline" data-get="volume" data-icon="fa-volume-up" data-background-icon="-" data-device="SB_Player_Kueche"></div>
</div>
-->
<div class="hbox items-space-around top-narrow-3x">
<div class="vbox">
<div data-type="switch" data-device="SB_Player_max2play" class="cell bigger narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_Kueche asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">max2play</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_PCT" class="cell bigger narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_Kueche asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">PCT</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_Bad" class="cell bigger narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_Kueche asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">Bad</div>
</div>
</div>
<div class="hbox top-narrow">
<div class="vbox">
<div data-type="switch" data-device="SB_Player_iPhoneTim" class="cell bigger narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_Kueche asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">iPhoneTim</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_max2play" class="cell bigger narrow" data-get="syncStatus" data-get-on='["yes","no"]' data-icons='["fa-link","fa-unlink"]' data-set-on="sync SB_Player_Kueche asSlave" data-set-off="unsync" data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">SZ</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="syncAll_Kueche" class="cell bigger narrow" data-get="STATE" data-get-on='["on","off"]' data-set-on="on" data-set-off="off" data-icons='["fa-link","fa-unlink"]' data-background-icon="fa-square-o" data-on-background-color="rgba(147, 147, 147, 0)" data-off-background-color="rgba(147, 147, 147, 0)" data-on-color="rgba(208,208,208,.8)" data-off-color="rgba(208,208,208,.8)"></div>
<div data-type="label" class="top-narrow-2x">alle</div>
</div>
</div>
</div>
</div>
<div class="hbox items-space-around top-space">
<div data-type="popup" data-height="600" data-width="950" class="thin centered">
<div data-type="label" class="darker tall left-narrow right-narrow">LMS</div>
<div class="dialog">
<header>Squeeze Küche</header>
<iframe style=" border:solid 1px #777 " width="99%" height="95%" frameborder="0" src="http://192.168.178.14:9000"></iframe>
</div>
</div>
<div data-type="push" data-device="SB_Player_Kueche" class="bigger" data-icon="-" data-background-icon="fa-step-backward" data-off-color="#505050" data-set-on="prev"></div>
<div data-type="switch" data-device="SB_Player_Kueche" class="bigger" data-get="playStatus" data-get-on="playing" data-get-off="!on" data-icon="fa-play" data-background-icon="fa-play" data-background-icon="-" data-set-on="play" data-set-off="pause" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="switch" data-device="SB_Player_Kueche" class="bigger" data-get="playStatus" data-get-on="paused" data-get-off="!on" data-icon="-" data-background-icon="fa-pause" data-set-on="pause" data-set-off="play" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="switch" data-device="SB_Player_Kueche" class="bigger" data-get="playStatus" data-get-on="!stopped" data-get-off="playing" data-icon="-" data-background-icon="fa-stop" data-set-on="stop" data-on-color="#aa6900" data-off-color="#505050"></div>
<div data-type="push" data-device="SB_Player_Kueche" class="bigger" data-icon="-" data-background-icon="fa-step-forward" data-off-color="#505050" data-set-on="next"></div>
<div data-type="switch" data-device="SB_Player_Kueche" class="left-narrow large" data-get="repeat" data-get-on='["off","one","all"]' data-set-states='["repeat one","repeat all","repeat off"]' data-icons='["fa-repeat","fa-repeat","fa-repeat"}' data-background-icons='["fa-repeat","fa-repeat","fa-repeat"]' data-background-colors='["rgba(147, 147, 147,.3)","rgba(147, 147, 147,.8)","#AA6900"]'></div>
<div data-type="switch" data-device="SB_Player_Kueche" class="right-narrow cell large" data-get="shuffle" data-get-on='["off","song","album"]' data-set-states='["shuffle song","shuffle album","shuffle off"]' data-icons='["fa-random","fa-random","fa-random"}' data-background-icons='["fa-random","fa-random","fa-random"]' data-background-colors='["rgba(147, 147, 147,.3)","#AA6900","rgba(147, 147, 147,.8)"]'></div>
</div>
<div class="hbox top-space">
<div class="vbox top-space right-space-2x">
<div data-type="push" data-device="SB_Player_Kueche" data-icon="" data-background-icon="" class="top-narrow-2x darker large" data-set-on="unsync">unsync</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="SB_Player_Kueche" class="bigger top-narrow-2x" data-get="syncVolume" data-get-on="1" data-get-off="0" data-set-on="syncVolume 1" data-set-off="syncVolume 0" data-icon="fa-volume-off" data-background-icon="-" data-on-color="rgb(191, 191, 191)"></div>
<div class="top-narrow darker">Lautstärke sync</div>
</div>
<div class="vbox">
<div data-type="switch" data-device="MusikSyncMode" class="bigger" data-get="state" data-warn="warn" data-icon="fa-search warn" data-off-color="#505050" data-on-color="rgb(191, 191, 191)" data-background-icon="fa-search-o"></div>
<div class="top-narrow-20 darker">rescan</div>
</div>
<div class="vbox top-narrow">
<div data-type="switch" data-device="Steckdose_Kueche_links" class="top-narrow bigger" data-get="state" data-on-background-color="white"></div>
<div data-type="label" class="darker">LED</div>
</div>
</div>
</div>
<div class="vbox narrow grow-2">
<div Class="hbox top-narrow-5">
<div Class="vbox">
<div data-type="label" class="cell">Playlists</div>
<div data-type="select" data-device="SB_Player_Kueche" data-delimiter="," data-list="SERVERPLAYLISTS" data-set="playlists" data-get="playlists" class="w4x"></div>
</div>
<div Class="vbox">
<div data-type="label" class="cell">Favoriten</div>
<div data-type="select" data-device="SB_Player_Kueche" data-delimiter="," data-list="FAVSTR" data-set="playlists" data-get="playlists" class="w4x"></div>
</div>
</div>
<div data-type="medialist" data-device="SB_Player_Kueche" data-set="track" data-get="ftuiMedialist" data-pos="playlistCurrentTrack" class="autoscroll index1" data-width="99%" data-height="620"></div>
</div>
</div>
</section>
<footer class="bg-lightgray">
<div class="hbox">
<div class="vbox grow-3">
<div class="tab-link">
<div data-type="link" data-load="#t_musik_uebersicht" data-url="#tablet/t_musik_uebersicht.html" data-icon="fa-list-ul" data-color="#555555" data-active-color="white" data-active-pattern=".*#t_musik_uebersicht.html">Übersicht</div>
<span class="tab-label"></span>
</div>
</div>
<div class="vbox grow-3">
<div class="tab-link">
<div data-type="link" data-load="#t_musik_kueche" data-url="#tablet/t_musik_kueche.html" data-icon="mi-kitchen" data-color="#555555" data-active-color="white" data-active-pattern=".*#t_musik_kueche.html">Kueche</div>
<span class="tab-label"></span>
</div>
</div>
<div class="vbox grow-3">
<div class="tab-link" >
<div data-type="link" data-load="#t_musik_bad" data-url="#tablet/t_musik_bad.html" data-icon="fa-bathtub" data-color="#555555" data-active-color="white" data-active-pattern=".*#t_musik_bad.html">Bad</div>
<span class="tab-label"></span>
</div>
</div>
<div class="vbox grow-3">
<div class="tab-link" >
<div data-type="link" data-load="#t_musik_wohnzimmer" data-url="#tablet/t_musik_wohnzimmer.html" data-icon="fa-home" data-color="#555555" data-active-color="white" data-active-pattern=".*#t_musik_wohnzimmer.html">Wohnzimmer</div>
<span class="tab-label"></span>
</div>
</div>
<div class="vbox grow-3">
<div class="tab-link">
<div data-type="link" data-load="#t_musik_iphone" data-url="#tablet/t_musik_iphone.html" data-icon="fa-apple" data-color="#555555" data-active-color="white" data-active-pattern=".*#t_musik_iphone.html">iPhoneTim</div>
<span class="tab-label"></span>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>