Probleme mit der Formatierung in einer Box

[derNeue]

Hallo zusammen, ich habe immer wieder Probleme mit der Formatierung in den Boxen vom Tablet UI.
Ich habe auch schon im Wiki gesucht aber leider keine richtige Anleitung gefunden.

Code Auswählen Erweitern

</li>
  <li data-row="6" data-col="4" data-sizex="5" data-sizey="6">
<header>Spritpreise</header>
<div class="inline">
<div data-type="label" >HIT</div>
<div data-type="label" >SuperE5</div>
<div data-type="label" data-device="Hit"
     data-get="SuperE5" data-unit="Euro"></div>
<div data-type="label" >SuperE10</div>
<div data-type="label" data-device="Hit"
     data-get="SuperE10" data-unit="Euro"></div>
</div>
</li>

Ich möchte alles nebeneinander...mit ein paar leerzechen zwischen den Daten..
Kann mir da einer einmal Helfen...

Danke

[paul79]

Hallo,

ich würde es so schreiben:

Code Auswählen Erweitern


</li>
  <li data-row="6" data-col="4" data-sizex="5" data-sizey="6">
<header>Spritpreise</header>
<div class="inline">
<div data-type="label" class="inline wider">HIT</div>
<div data-type="label" class="inline wider">SuperE5</div>
<div data-type="label" data-device="HIT" data-get="SuperE5" data-unit="Euro" class="inline wider"></div>
<div data-type="label" class="inline wider">SuperE10</div>
<div data-type="label" data-device="HIT" data-get="SuperE10" data-unit="Euro" class="inline wider"></div>
</div>
</li>


Gruß Paul

[setstate]

Ich würde es so machen

Code Auswählen Erweitern


            <li data-row="6" data-col="4" data-sizex="5" data-sizey="2">
                <header>Spritpreise</header>
                <div class="hbox items-space-around">
                    <div class="bold">HIT</div>
                    <div>SuperE5</div>
                    <div data-type="label" data-device="HIT" data-get="SuperE5" data-unit=" Euro"></div>
                    <div>SuperE10</div>
                    <div data-type="label" data-device="HIT" data-get="SuperE10" data-unit=" Euro"></div>
                </div>
            </li>


- data-type="label" muss nur hin, wenn es aktiv von FHEM Daten bekommen soll, ansonsten reicht reines HTML
- Einen Div-Container mit class="inline", der alle Child-Knoten in-linie bringen soll, ist eine gute Überlegung, aber ist so nicht vorgesehen. Die "inline"s müssen an die Children. Der Container braucht nichts dran.
- Mein Beispiel hier nutzt als Container aber eine Horizontale Box -> class="hbox". Da werden alle Children horizontal angeordnet.
- für die "hbox" habe ich noch ein "items-space-around" gesetzt, damit die Elemente gleichmässig verteilt sind. Ansonsten sind sie in der Mitte eng zusammen. Mit "items-space-between" sind die Box-Elemente so weit auseinander, wie möglich.

[derNeue]

Vielen Danke für die Hilfe, aber das gefällt mir doch nicht so gut....

Ich habe jetzt wie es normal ist eine Box angelegt und es wird alles untereinander geschrieben,es wäre aber super wenn die erste Tankstelle rechtbündig wäre , die zweite in die Mitte und die dritte linksbündig.Danke

Code Auswählen Erweitern

<li data-row="6" data-col="4" data-sizex="9" data-sizey="4">
                <header>Spritpreise</header>
                    <div class="bold">HIT-Eschweiler</div>
                    <div>SuperE5</div>
                    <div data-type="label" data-device="Eschweiler_Hit" data-get="SuperE5" data-unit=" Euro"></div>
                    <div>SuperE10</div>
                    <div data-type="label" data-device="Eschweiler_Hit" data-get="SuperE10" data-unit=" Euro"></div>
                   
                    <div class="bold">MAK-Aldenhoven</div>
                    <div>SuperE5</div>
                    <div data-type="label" data-device="Markant_Aldenhoven" data-get="SuperE5" data-unit=" Euro"></div>
                    <div>SuperE10</div>
                    <div data-type="label" data-device="Markant_Aldenhoven" data-get="SuperE10" data-unit=" Euro"></div>

    <div class="bold">Star-Eschweiler</div>
                    <div>SuperE5</div>
                    <div data-type="label" data-device="Star_Eschweiler" data-get="SuperE5" data-unit=" Euro"></div>
                    <div>SuperE10</div>
                    <div data-type="label" data-device="Star_Eschweiler" data-get="SuperE10" data-unit=" Euro"></div>
</li>

[setstate]

H-Box + V-Box

Code Auswählen Erweitern

<li data-row="6" data-col="4" data-sizex="9" data-sizey="4">
    <header>Spritpreise</header>
    <div class="hbox items-space-around">
        <div class="vbox">
            <div class="bold">HIT-Eschweiler</div>
            <div>SuperE5</div>
            <div data-type="label" data-device="Eschweiler_Hit" data-get="SuperE5" data-unit=" Euro"></div>
            <div>SuperE10</div>
            <div data-type="label" data-device="Eschweiler_Hit" data-get="SuperE10" data-unit=" Euro"></div>
        </div>
        <div class="vbox">
            <div class="bold">MAK-Aldenhoven</div>
            <div>SuperE5</div>
            <div data-type="label" data-device="Markant_Aldenhoven" data-get="SuperE5" data-unit=" Euro"></div>
            <div>SuperE10</div>
            <div data-type="label" data-device="Markant_Aldenhoven" data-get="SuperE10" data-unit=" Euro"></div>
        </div>
        <div class="vbox">
            <div class="bold">Star-Eschweiler</div>
            <div>SuperE5</div>
            <div data-type="label" data-device="Star_Eschweiler" data-get="SuperE5" data-unit=" Euro"></div>
            <div>SuperE10</div>
            <div data-type="label" data-device="Star_Eschweiler" data-get="SuperE10" data-unit=" Euro"></div>
        </div>
    </div>
</li>

           hbox
vbox     vbox     vbox
T1.        T2.       T3.
S1.        S2.       S3.
S4.        S5.       S6.

[derNeue]

super, genau so....wo kann ich solche infos erlesen, so das ich nicht immer fragen muss....

Danke

[setstate]

Das ist noch im "... müsste man mal dokumentieren" Status.

[TWART016]

Bei mir haben items-space-around und items-space-between keine Auswirkung auf die Formatierung.

[Ulm32b]

Auch von meiner Seite hier eine ungelöste horizontale Verteilung.
Der folgende Code erzeugt Bild 1:

Code Auswählen Erweitern

<div class="container top-space-3x">

<div data-type="switch" class="cell big inline"
     data-device="Garage_Nord_Fahrbefehl_auf"
     data-icon="fa-chevron-up"
     data-color="hsl(50,100%,50%)"
     data-lock="Garage_Nord_Fahrbefehl_auf_gesperrt:readonly"
     data-get-on="on"
     data-get-off="off"></div>

<div data-type="link"
data-device="Garage_Nord_Fahrbefehl_Stop"
data-fhem-cmd="set Garage_Nord_Fahrbefehl_Stop_Timer on-for-timer 2;set Garage_Nord_Status angehalten"
data-lock="Garage_Nord_Fahrbefehl_Stop_gesperrt:readonly"
data-background-color="red"
data-width="80" data-height="55"
data-color="white"
data-text-align="center"
class="round large bold inline">STOP</div>

<div data-type="switch" class="cell big inline"
     data-device="Garage_Nord_Fahrbefehl_ab"
     data-icon="fa-chevron-down"
     data-color="hsl(50,100%,50%)"
     data-lock="Garage_Nord_Fahrbefehl_ab_gesperrt:readonly"
     data-get-on="on"
     data-get-off="off"></div>
</div>

Mit hbox tanzen die Elemente sowohl horizonal als auch vertikal noch weiter aus der Reihe (Bild 2):

Code Auswählen Erweitern

<div class="hbox top-space-3x items-space-around">

<div data-type="switch" class="cell big"
     data-device="Garage_Nord_Fahrbefehl_auf"
     data-icon="fa-chevron-up"
     data-color="hsl(50,100%,50%)"
     data-lock="Garage_Nord_Fahrbefehl_auf_gesperrt:readonly"
     data-get-on="on"
     data-get-off="off"></div>

<div data-type="link"
data-device="Garage_Nord_Fahrbefehl_Stop"
data-fhem-cmd="set Garage_Nord_Fahrbefehl_Stop_Timer on-for-timer 2;set Garage_Nord_Status angehalten"
data-lock="Garage_Nord_Fahrbefehl_Stop_gesperrt:readonly"
data-background-color="red"
data-width="80" data-height="55"
data-color="white"
data-text-align="center"
class="round large bold">STOP</div>

<div data-type="switch" class="cell big"
     data-device="Garage_Nord_Fahrbefehl_ab"
     data-icon="fa-chevron-down"
     data-color="hsl(50,100%,50%)"
     data-lock="Garage_Nord_Fahrbefehl_ab_gesperrt:readonly"
     data-get-on="on"
     data-get-off="off"></div>
</div>


[Ulm32b]

Nach dem Update (vgl. https://forum.fhem.de/index.php/topic,63253.msg544981.html#msg544981) ist bei mir alles gut. Vielen Dank, setstate.