Hilfe bei der Positionierung

[desasterguy]

Hallo Forum,

ich stehe vor der Herausforderung eine Kachel so anzuordnen dass die Symbole schön gleichmäßig sind.
Es will mir aber einfach nicht gelingen.

Die Kachel habe ich mit angehängt.

Was hätte ich gerne:
1. Das beiden runden Button sollten untereinander sein.  (das würde mir sogar schon reichen)
2. IDEAL -> Wenn dann noch alles in der Kachel mittig gezeigt wird.

Hat jemand eine gute Idee?


Code:

Code Auswählen Erweitern

<li data-row="1" data-col="3" data-sizey="1" data-sizex="2">
               
                <header>SCHLAFZIMMER</header>
               
                <div class="sheet">
                   
                    <div class="row">
                       
                        <div class="cell" data-type="thermostat" data-device="SchlafzimmerHeizung_Clima" data-valve="ValvePosition"></div>
                       
                            <div data-type="circlemenu" data-direction="bottom-half">
                                            <ul>
                                                <li>
                                                    <div data-type="push" data-icon="fa-wrench" class="small"></div>
                                                </li>
                                                <li>
                                                <div class="sheet">   
                                                <div class="row">   
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -6" data-icon="" >auf</div>
                                                   </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -2" data-icon="">zu</div>
                                                </li>
                                             
                                            </ul>
                                         </div>
                                <div data-type="switch" data-device="PowerAV_SSS" class="small"></div>
                           
                     </div>
                             
                </div>
            </li>

Viele Grüße desasterguy

[setstate]

die Default-Weite vom Circlemenu habe ich geändert

den Rest würde ich mit vbox/hbox bauen

Code Auswählen Erweitern


            <li data-row="1" data-col="3" data-sizey="1" data-sizex="2">

                <header>SCHLAFZIMMER</header>

                <div class="hbox">
                    <div class="vbox" data-type="thermostat" data-device="BadHeizung" data-device="BadHeizung" data-get="soll-get" data-temp="ist-get" data-valve="stellgroesse-get"></div>
                    <div class="vbox items-space-around">
                        <div data-type="circlemenu" data-direction="bottom-half">
                            <ul>
                                <li>
                                    <div data-type="push" data-icon="fa-wrench" class="small"></div>
                                </li>
                                <li>
                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -6" data-icon="">auf</div>
                                </li>
                                <li>
                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -2" data-icon="">zu</div>
                                </li>
                            </ul>
                        </div>
                        <div data-type="switch" data-device="PowerAV_SSS" class="small"></div>
                    </div>
                </div>
            </li>


[desasterguy]

Dank dir setstate für die schnelle Antwort.

Leider bringt es nicht den gewünschten Effekt.
Dadurch wird der Termostatregler nach oben geschoben etwas in dad Feld der Überschrift ,,Schlafzimmer" und die beiden Symbole die genau untereinadet sollen bleiben beharlich an der alten Position. 

Hat es evtl. etwas mit dem ,,<div class="vbox items-space-around">" zu tun? Hätte ich hier noch was eintragen müssen?

[setstate]

Wenn man das letzte Update zieht und der Browser Flexbox versteht, sollte es genau passen.

Ansonsten könnte man auch mit row und col Klassen arbeiten.

[desasterguy]

Browser nutze ich sehr unterschiedliche. Safari, Firefox, Fully Kiosk Browser
Updates werden von FHEM automatisch eingespielt. Somit bin ich immer auf stand bei Tablet UI -> Dachte ich.

Hab gerade nochmal manuel Tablet Ui geupdatet und schon sind die beiden Symbole in einer Reihe. Fantastisch.
Es bleibt aber leider dabei, dass das Thermostat zu hoch angezeigt wird. Siehe Bild. 

[setstate]

Das Thermostat nimmt den Platz ein, den ein voller Kreis benötigt. Da ist in deiner Kachel nicht mehr viel Platz, sorry.
Man kann mit class="bg-red" sehr schön sehen, wie das Widget innerhalb seines eigenen Containers platziert ist.

[desasterguy]

Das Thermostat nimmt den Platz ein, den ein voller Kreis benötigt. Da ist in deiner Kachel nicht mehr viel Platz, sorry.
Man kann mit class="bg-red" sehr schön sehen, wie das Widget innerhalb seines eigenen Containers platziert ist.

Ok, das leuchtet ein. Wenn ich den Kreis gedanklich vervollständige passt es nicht in mein Feld und dadurch schiebt sich das Symbol. Den Gedanken muss man erst mal haben, dass es als vollwertiger Kreis berücksichtigt werden muss. :O)

Ich bin auch schon ein gutes Stück weiter gekommen. Und dadurch auf die nächste Herausforderung gestossen. Kann es sein, dass es sich um einen Bug handelt?
Auf dem Bild ist zu sehen (rot markiert), dass sich die Felder unter "Vorratsraum", "Gäste WC" und ein Teil unter Feld "Eingang&Treppe hoch" unnormal verhalten. Diese werden einfach verlängert bis diese auf das nächste Feld stossen. Hat jemand eine Idee wie das gekommen ist? 

Ich habe nichts an anderen Dateien verändert. Nur die index-Datei bearbeitet.

Viele Grüße
desasterguy

[Gunther]

Das habe ich wenn ich gridster Elemente bearbeite und diese sich versehentlich überlagern. Manchmal reicht da ein kleiner Fehler.