FTUI Layout mit Flexbox

kud · 29 Dezember 2016, 15:27:04

Hallöchen,
bin gerade in einer Umsetzung mit FLEXBOX. Finde ich recht cool, da mit einer Datei, bei richtigen Einsatz, sowohl der Desktop als auch Tablet und Handy bedient werden.
Wollte jetzt so eine Art Statuszeile über die beiden Spalten bringen. Darin sollten x beliebige Readings nebeneinander auftauchen.
Habe schon alles mögliche probiert leider keinen durchgehenden Erfolg. Bei einer "hbox" stehen zwar die Werte nebeneinander jedoch ist dann der Abstand nach unten zu groß.
Wer kann da helfen?

setstate · 29 Dezember 2016, 15:33:09

ich würde eine hbox nehmen und mit style="height:120px;" die Höhe fixieren

kud · 29 Dezember 2016, 17:37:13

Danke setstate für Antwort und natürlich die tolle Möglichkeit FHEM aufzuhübschen.
Mein Code (falls ich das richtig verstanden habe) ist:

Code Auswählen

 <div class="hbox  style="height:120px" >
                        
                            <div data-type="label" data-device="CUL_WS_5" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="large thin"></div>
                            <div data-type="label" class="cell">Temperatur</div>
                            <div data-type="label" data-device="CUL_WS_5" data-fix="0" data-get="humidity" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="large thin"></div>
                            <div data-type="label" class="cell">Luftfeuchte</div>
			 </div>

Der Abstand zu den Spalten darunter ist aber immer noch riesig.
BTW. Woher bekomme ich die Infos zu "HBOX" ? Ist das Flexbox / CSS oder Deine Implementierung?

Danke.

kud · 30 Dezember 2016, 11:06:24

Das oben war ne dumme Frage.
Man sollte ein wenig über css/html/inline style lesen

Für alle die es interessiert. So klappt es:

Code Auswählen

 <div style="height: 5%;" class="hbox" >
                        
                            <div data-type="label" data-device="CUL_WS_5" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="large thin"></div>
                            <div data-type="label" class="cell">Temperatur</div>
                            <div data-type="label" data-device="CUL_WS_5" data-fix="0" data-get="humidity" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="large thin"></div>
                            <div data-type="label" class="cell">Luftfeuchte</div>
						
 			 </div>

Tobias · 04 Januar 2017, 11:42:27

hi,
ich habe probleme mit der full-height Angabe in einem Swiper. Der Swiper umfasst die komplette Seite.
Problem ist, das ich nichts sehe. Gebe ich stattdessen "data-height="740px"" an, so wird alles korrekt dargestellt. Übrigens, bei "data-height="100%"" wird auch nix gezeigt
Hier mein Code:

Code Auswählen

<html>
<title>FHEM Home</title>
<head>
</head>

<body>
    <div class="page" id="musik">
      <div data-type="swiper" data-width="100%" class="full-height" >
        <ul>
          <li>
            <div class="gridster">
              <ul>
                <li data-row="1" data-col="1" data-sizex="8" data-sizey="6">
                  <header>Wohnzimmer</header>
                  <div data-template="template_musik_sonos.html"></div>
                </li>
              <ul>
            </div>
          <li>
            <div class="gridster">
              <ul>
                <li data-row="1" data-col="1" data-sizex="8" data-sizey="6">
                  <header>MPD Player</header>
                  <div data-template="template_musik_mpd.html"
                     data-parameter='{"par_device":"MPD",
                                      "par_SC_dev":"WW_EG_Kueche",
                                      "par_SC_color":"Farbwert_Gruppe1",
                                      "par_RL_auto":"RL_EG_Auto"}'>
                  </div>
                <li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
</body>
</html>

Benutze ich full-height falsch?
Ps: mit data-width="100%" funktioniert es dagegen

kud · 04 Januar 2017, 12:31:40

Hat das jetzt was mit FLEXBOX zu tun ?

Tobias · 04 Januar 2017, 12:36:42

die Klasse "full-height" gehört zur Flexbox, siehe GitHub Readme

grossmaggul · 02 Februar 2017, 13:41:00

Hallo,

gibt es irgendwo ein Doku zu Flexbox?

vg

Marc-Antón

grossmaggul · 09 Februar 2017, 19:04:22

Scheinbar wohl nicht.

setstate · 09 Februar 2017, 19:27:06

Nö, iss wirklich nix noch da.

schmimat · 13 Februar 2017, 15:46:33

Hallo,

seit dem Update auf 2.5 (bzw. 2.6) wird im Flexbox Layout mit Menu-Steuerung die "page" nicht mehr neben dem Menu angezeigt.
Habe auch die Beispiele ausprobiert, gleiches Problem

Woran könnte es liegen ?

Vielen Dak für Eure Hilfe.

mfG Matthias

Rudy · 13 Februar 2017, 18:22:07

Da gibt es wohl ein Problem mit der CSS-Klasse:

Code Auswählen

div:not(.circlemenu-wrapper) > .menu {
    background: #1D1F20;
    height: 100vh;
    width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
}

Nachdem ich bisherige Variante

Code Auswählen

:not([data-type="circlemenu"]) > .menu {
    background: #1D1F20;
    height: 100vh;
    width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
}

in meine user.css-Datei eingefügt hatte, ging es wieder.

setstate · 14 Februar 2017, 00:03:20

Danke Rudy für die entscheidenden Hinweise. Problem ist gefixed

schmimat · 14 Februar 2017, 09:02:43

Hallo und guten Morgen,

vielen Dank für die schnelle Hilfe und die Berichtigung.

Ich hoffe ich nerve nicht, aber ich hab schon wieder was gefunden.

Beim Ändern der Größe des Browsers von 901 auf 900 werden zwar die Beschriftungen der Icons (span) ausgeblendet und die aktive Page verschoben, jedoch nicht das Menu selbst kleiner gemacht.
(siehe Bilder des Beispiels)

Wo liegt hier das Problem?

Sollen eigentlich diese Probleme hier gemeldet werden, oder besser im git?

Vielen Dank für eure Bemühungen und ein großes Lob an setstate.

mfG Matthias

Rudy · 14 Februar 2017, 17:37:49

Dagegen hilft folgender Eintrag in deinem eigenen css:

Code Auswählen

@media screen and (max-width: 900px) and (min-width: 480px) {
    :not([data-type="circlemenu"]) > .menu {
    width: 90px;
    }
}

FTUI Layout mit Flexbox

schmimat

schmimat