Position von hbox,vbox

[rvideobaer]

Hallo,

ich hatte bis jetzt hbox mit class="hbox centered big" centriert angeordnet.
Dies funktioniert aber nicht mehr, wurde die Einstellung geändert?

Gruß Rolf

[setstate]

Eine hbox stellt alle seine inneren Items horizontal angeordnet und automatisch zentriert da.

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="4" data-sizey="3">
    <header>LICHT</header>
    <div class="hbox">
        <div data-type="switch" data-device="MyLamp1"></div>
        <div>Lampe1</div>

        <div data-type="switch" data-device="MyLamp2"></div>
        <div>Lampe2</div>

        <div data-type="switch" data-device="MyLamp3"></div>
        <div>Lampe3</div>
    </div>
</li>


Oder ist deine hbox selbst das Kind und ist nicht zentriert?

[setstate]

Der nächste Schritt wäre, Text und Switch untereinander anzuordnen -> vertikal -> vbox

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="4" data-sizey="3">
    <header>LICHT</header>
    <div class="hbox">
        <div class="vbox">
            <div data-type="switch" data-device="MyLamp1"></div>
            <div>Lampe1</div>
        </div>
        <div class="vbox">
            <div data-type="switch" data-device="MyLamp2"></div>
            <div>Lampe2</div>
        </div>
        <div class="vbox">
            <div data-type="switch" data-device="MyLamp3"></div>
            <div>Lampe3</div>
        </div>
    </div>
</li>


[rvideobaer]

Hallo,

ich habe dies folgender massen angelegt

Code Auswählen Erweitern

<div class="hbox centered big" style="color:#F7E7CE;position:relative; top:290px">
   
    <div data-type="label"
    data-device="rx601"
data-get="currentStation"></div>
<div data-type="classchanger"
                data-device="rx601"
                data-get="currentAlbum"
                data-get-on=""
                data-on-class="hide"
                class="inline">Album:</div>
<div data-type="label"
    data-device="rx601"
data-get="currentAlbum"
class="inline autohide"></div>
<div data-type="classchanger"
                data-device="rx601"
                data-get="currentArtist"
                data-get-on=""
                data-on-class="hide"
                class="inline left-space">- Artist:</div>
<div data-type="label"
    data-device="rx601"
data-get="currentArtist"
class="inline"></div>
</div>
Damit wurde die Zeile zentriert angezeigt, jetzt ist alles linksbündig.

Gruß Rolf

[setstate]

Das lass mal etwas weg:

- zum Beispiel der Voodoo mit dem position:relative; top:290px
- Kinder einer hbox brauchen kein class="inline", die sind durch die hbox horizontal in Linie

Code Auswählen Erweitern

<div class="hbox big" style="color:#F7E7CE;">

Wie sieht es jetzt aus?

[rvideobaer]

Hallo,

immer noch linksbündig aber eben nicht mehr an der richtigen position in der höhe.
Ich habe mal die komplette html Datei angehängt, wird auf einem 6 Zoll tablet angezeigt.

Gruß Rolf

[TWART016]

Die 3 Elemente sind über die ganze breite verteilt. Wie bekomme ich die labels ganz nah an den slider?

<div class="hbox">
   <div data-type="label" data-device="SB_Player_PCT" data-get="currentTrackPosition" data-substitution="toMinFromSec()" class=""></div>
   <div data-type="slider" data-device="SB_Player_PCT" class="horizontal" data-width="200" 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=""></div>
</div>