Hallo,
Ich habe eine HBox mit 5 Icons für die Integration in Sonos, jedoch werden mir die Icons auf einer Mobile Seite linksbündig angezeigt und nicht mittig.
Gibt es eine Möglichkeit die Elemente zu zentrieren?
<div class="page" id="m_sonos">
<section>
<div class="large center-align">Wohnzimmer</div>
<div data-type="image" data-device="Sonos_Wohnzimmer" data-get="currentAlbumArtURL" data-size="65%" class="top-space"/>
<div class="hbox">
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-step-backward" data-set-on="Previous"/>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-stop" data-set-on="Stop"/>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-play" data-set-on="Play"/>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-step-forward" data-set-on="Next"/>
<div data-type="push" id="Sonos_Wohn" data-icon="fa-volume-up"/>
<div data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#Sonos_Wohn" class="col-1-6">
<div class="dialog">
<header>Sonos Wohnzimmer</header>
<div data-type="volume" data-device="Sonos_Wohnzimmer" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="big top-space-2x"/>
</div>
</div>
</div>
</section>
<section>
<div class="large center-align">Küche</div>
</section>
<section>
<div class="large center-align">Bad</div>
</section>
<section>
<div class="large center-align">Kinderzimmer</div>
</section>
</div>
Bitte Update holen. Ich habe das optimiert...
Hallo,
jetzt hat es meine Anordnung völlig zerschossen.
bis jetzt hatte ich es so:
<div class="hbox items-space-between left-space right-space" style="position:absolute; top:5px; left:290px; color:#ffa30d">
mit der Anordnung so:
<div style="position:absolute; top:5px; left:290px; color:#ffa30d">
<div class="hbox items-space-between left-space right-space" >
funktioniert es wieder.
Gruß Rolf
Nach einem Update sieht es zumindest für die Buttons besser aus. Habe ich allerdings zwei Label, werden sie mittig angezeigt jedoch gibt es keinen Platz dazwischen.
Gibt es eine Möglichkeit auch 2 Labels gleichmässig auf die Breite aufzuteilen?
<Abstand> Label1 <Abstand> Label2 <Abstand>
items-space-between
Führt leider dazu, dass ein Label ganz links ist und eins ganz rechts.
items-space-around
sorgt für gleichmäßig viel Platz um die Items herum. Ich schau mal, warum das nicht der default ist und eng ein forcierter Zustand.
Vielen Dank.
Gibt es irgendwo eine Übersicht über die ganzen Einstellmöglichkeiten?
Zitat
items-space-around
sorgt für gleichmäßig viel Platz um die Items herum. Ich schau mal, warum das nicht der default ist und eng ein forcierter Zustand.
Eine gleichmäßige Verteilung in hbox über die gesamte Breite wäre für mich ein Schritt rückwärts. Die im Bild angezeigte Anordnung von Bedienelementen ist harmonischer. Wenn ich das über "inline" regele, stimmt die Höhenausrichtung der Widgets nicht ... ???
Noch nicht, ich wollte anfangen, aber finde immer wieder offene Baustellen bei den Flexbox Klassen. So ist eine vbox in einer hbox nicht so hoch wie sein parent (die hbox), sondern wie der parent der hbox, also der parent vom parent. Ich verzweifle gerade daran und google und probiere hin und her. Also keine Zeit für Dokumentation von was, was sich eh noch ändert. Also noch nicht soviel benutzen, oder mich nicht zusammenstauchen, wenn nach einem Update euer Layout etwas anders aussieht.
Nachtrag:
Wenn es CSS Flexbox Experten gibt, die mir hier einen Tipp geben könnten, wäre das ein super Weihnachtsgeschenk :D
Warum ist die vbox nicht nur so hoch wie seine direkte Parent-Box, sondern so hoch wie einige Parents höher?
<li data-row="1" data-col="1" data-sizex="4" data-sizey="3">
<header>LICHT</header>
<div class="vbox">
<div class="hbox big thin">
<div class="bold">Stand: </div>
<div data-type="label" data-device="dummy1"></div>
</div>
<div class="hbox bg-red">
<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 bg-green half-transparent">
<div data-type="switch" data-device="MyLamp3"></div>
<div>Lampe3</div>
</div>
</div>
</div>
</li>
Krass: Der Firefox macht es wie gewünscht! Siehe Bild2. Safari verhält sich anders. Bild1
Zitat von: Ulm32b am 23 Dezember 2016, 08:31:00
Eine gleichmäßige Verteilung in hbox über die gesamte Breite wäre für mich ein Schritt rückwärts. Die im Bild angezeigte Anordnung von Bedienelementen ist harmonischer. Wenn ich das über "inline" regele, stimmt die Höhenausrichtung der Widgets nicht ... ???
Man muss sehen, welcher default der bessere ist. Den anderen Fall muss man dann eben extra angeben. Es wird also ein "items-center" geben. Ich habe mich aber noch nicht entschieden.
Also bei mir sind die automatisch über die ganze breite verteilt, mit
<div class="hbox narrow">
bekomme ich die in die Mitte nah beieinander.
Bei mir klappt es auch so allerdings nur bei push buttons. Nutze ich nur labels, funktioniert es nicht.
@ setstate
ich bin leider kein Experte ich kenne mich mit CSS absolut nicht aus, aber wenn ich
<!script src="lib/jquery.gridster.min.js"></script>
weglasse sieht es bei mir so aus:
PS: kann man dein Weißes Layout irgendwo runter laden?
Zitat von: SamNitro am 23 Dezember 2016, 10:20:05
@ setstate
ich bin leider kein Experte ich kenne mich mit CSS absolut nicht aus, aber wenn ich
<!script src="lib/jquery.gridster.min.js"></script>
weglasse sieht es bei mir so aus:
PS: kann man dein Weißes Layout irgendwo runter laden?
Zitat von: SamNitro am 23 Dezember 2016, 10:20:05
@ setstate
ich bin leider kein Experte ich kenne mich mit CSS absolut nicht aus, aber wenn ich
<!script src="lib/jquery.gridster.min.js"></script>
weglasse sieht es bei mir so aus:
Ja, mit Javascript "zaubere" ich extra noch etwas im Gridster-Umfeld. Aber das sind auch nur Workarounds, wenn reines CSS nicht mehr hilft.
Zitat von: SamNitro am 23 Dezember 2016, 10:20:05
PS: kann man dein Weißes Layout irgendwo runter laden?
Das muss die fhem-mobil-ui.css hinzufügen
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
ZitatDas muss die fhem-mobil-ui.css hinzufügen
Code: [Auswählen]
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
Danke :)
Vor dem update waren meine Positionen Besser ::)
naja dann muss ich abwarten was da noch passiert ;)
Hallo,
gibt es eine Möglichkeit die Höhe/Breite der Box festzulegen?
Ich hätte in einer vbox gerne 3 hboxen die aber verschieden hoch sein sollen.
Gruß Rolf
Mit grow-x.
Alle Boxen sind gleichwertig mit grow-1. Wenn eine Box höher / breiter sein soll, setzt man zum Beispiel grow-2. Dann ist diese Box doppelt so hoch. Oder grow-3, dreifach so hoch. Es geht auch grow-2 + grow-3, dann erhält man entsprechende 3 zu 2 Relation.
Musste leider die alte version vor dem update nehmen siehe Anhang