hbox: Icons mittig

gloob · 22 Dezember 2016, 14:43:22

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?

Code Auswählen

<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>

setstate · 22 Dezember 2016, 16:20:30

Bitte Update holen. Ich habe das optimiert...

rvideobaer · 22 Dezember 2016, 20:33:46

Hallo,

jetzt hat es meine Anordnung völlig zerschossen.
bis jetzt hatte ich es so:

Code Auswählen

 <div class="hbox items-space-between  left-space right-space" style="position:absolute; top:5px; left:290px; color:#ffa30d">

mit der Anordnung so:

Code Auswählen

 <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

gloob · 22 Dezember 2016, 21:32:52

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>

Code Auswählen

items-space-between
Führt leider dazu, dass ein Label ganz links ist und eins ganz rechts.

setstate · 23 Dezember 2016, 07:18:32

Code Auswählen

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.

gloob · 23 Dezember 2016, 08:17:47

Vielen Dank.

Gibt es irgendwo eine Übersicht über die ganzen Einstellmöglichkeiten?

Ulm32b · 23 Dezember 2016, 08:31:00

Zitat

Code Auswählen Erweitern
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 ...

setstate · 23 Dezember 2016, 08:31:31

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

Warum ist die vbox nicht nur so hoch wie seine direkte Parent-Box, sondern so hoch wie einige Parents höher?

Code Auswählen


            <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:&nbsp;</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

setstate · 23 Dezember 2016, 08:37:37

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.

SamNitro · 23 Dezember 2016, 08:48:58

Also bei mir sind die automatisch über die ganze breite verteilt, mit

Code Auswählen

<div class="hbox narrow">
bekomme ich die in die Mitte nah beieinander.

gloob · 23 Dezember 2016, 08:58:01

Bei mir klappt es auch so allerdings nur bei push buttons. Nutze ich nur labels, funktioniert es nicht.

SamNitro · 23 Dezember 2016, 10:20:05

@ setstate
ich bin leider kein Experte ich kenne mich mit CSS absolut nicht aus, aber wenn ich

Code Auswählen

<!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?

setstate · 23 Dezember 2016, 10:29:29

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
Code Auswählen Erweitern
<!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
Code Auswählen Erweitern
<!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

Code Auswählen


    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="css/fhem-mobil-ui.css" />

SamNitro · 23 Dezember 2016, 11:11:34

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

rvideobaer · 23 Dezember 2016, 16:19:49

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