Autor Thema: Tablet UI - responsive Design (flexbox)  (Gelesen 28425 mal)

Offline australien

  • Full Member
  • ***
  • Beiträge: 167
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #150 am: 03 Januar 2019, 23:53:28 »
super, danke!

werde mich da mal einlesen.
raspberry pi3
signalduino, Shelly1, Shelly2, Sonos, Unifi
Amazon Fire Tablet 7 | Noname Android Tablet 10"

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #151 am: 13 Januar 2019, 16:36:04 »
Hallo Ihr, an dieser Problematik beiße ich mir gerade noch die Zähne aus.
ios 9 und auch bei mir bekomme ich diesen verflixten Back-Button einfach nicht oben links in die Ecke, dass er den System/Menu Button überdeckt. Dies passiert nur wenn man die og Modifikationen einbaut

body {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }


habs auch schon im Container, im html, im was weiß ich nicht alles probiert. Entweder das Iphone scrollt wie man es im Iphone gewohnt ist .... mit nicht wirklich funktionierendem Back-Button, ..... oder mit funktionierendem Back-Button und scrollen ist die Hölle. Irgendjemand?

Edit: erschwerend ist, dass das Problem nur auf dem iphone auftritt. Chrome, Firefox, egal ob auf PC oder Mac funktionierts. Nicht sehr hilfreich für die Suche ;)

Gibt es da schon eine Lösung?
Mein Problem derzeit: Scollen auf Iphone geht leider nicht wie sonst gewohnt (anstupsen und es läuft).
Backbutton auf Iphone vorhanden aber auf breitem Device nicht.
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1436
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #152 am: 13 Januar 2019, 21:15:39 »
Ich habe nun mal ein wenig rumprobiert (Achtung: Ich bin absoluter Laie in Sachen CSS und HTML).

Wenn ich die Schnipsel für das IOS-Scrollen einfüge, die ich überall im Web finde, funktioniert das weiche Scrollen auch aber überdeckt anscheinend den Backbutton.

Code für weiches Scollen:
overflow-y: scroll; /* has to be scroll, not auto */
      -webkit-overflow-scrolling: touch;

Warum das nun den Backbutton überdeckt weiß ich nicht.
Backbutton:
}
.phone-back-btn {
        top: 0px;
        left: 0px;
height: 39px;
width: 39px;
        position: absolute;
        background: #1D1F20;
padding-top: 0.31em;
z-index: 5;
display: block;
}

Sehen kann ich das, wenn ich den Backbutton auf
height: 50px
vergrößere

Dann schaut dieser hervor und kann genutzt werden.

Frage: Warum überdeckt das Scrollen die obere Zeile?
Kann ich mitteilen, was in "Vordergrund" und was im "Hintergrund" ist?
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline adrian

  • New Member
  • *
  • Beiträge: 21
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #153 am: 12 Februar 2019, 21:28:14 »
Hallo zusammen,
neuerdings, es gab wohl ein update, fährt am Android Smartphone die Navigationsleiste nicht mehr rein und verdeckt somit die linke Seite  meiner content-page.
wenn ich das Phone drehe auf "landscape" kann ich dafür nicht mehr nach oben scrollen. mir fehlen dann die obersten Zeilen.

auch wenn ich die orignal "index-html" aus der Zip-Datei, die im ersten Post enthalten ist verwende, kommen dennoch die gleichen fehler.
   
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />   
   <link rel="stylesheet" href="css/hdm-user-tablet-ui.css" />     
   <link rel="stylesheet" href="user-tablet-ui.css" />


habt ihr ähnliche Phänomene? oder könnt ihr helfen?

Offline SirMarco

  • Full Member
  • ***
  • Beiträge: 129
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #154 am: 20 Februar 2019, 20:07:37 »
Genau das Problem habe ich auch, das Menü fährt erst wieder ein wenn ich erneut auf den Menü Button klicke

Hast du eine Lösung gefunden?

Offline adrian

  • New Member
  • *
  • Beiträge: 21
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #155 am: 26 Februar 2019, 20:21:13 »
Hallo SirMarco,
Leider nicht, ich hab schon die alten css von einem Backup wieder eingespielt, es mit den Originaldateien aus der ZipDatei des ersten Eintrages versucht. Nichts, ich bekomm diese "SmartphoneUI" nicht mehr so zum Fliegen.
Mir ist auch aufgefallen, dass die Charts auf dem Wetter-Untermenu nun mit einem scharzen Hintergrund dargestellt werden und keine Verläufe mehr erkennbar sind.
Bei mir fährt am Desktop die Navigationsbar gar nicht rein, ging glaub auch früher nicht und wäre für mich nicht tragisch, aber am Smartphone ist es genau das Feature was so toll war.
Wenn jemand ne Idee hat, bzw. noch die Orignal CSS und alles drum rum aus dem lib und js Ordner, dann bitte auch bereitstellen.
BITTE BITTE BITTE :-)

Offline STING333

  • New Member
  • *
  • Beiträge: 12
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #156 am: 21 März 2019, 22:11:16 »
Hallo,
danke für die tolle Vorlage, hänge aktuell da dran das ich gerne die Breite der Menuleiste anpassen wollte und nur Icons ohne Text mittig.... leider bekomme ich weder die Breite eingestellt noch die Icons mittig.

Hat da einer eine gute Idee für mich wo ich meinen Denkfehler mache?!

Danke & Gruß
Gerhard
FHEM 5.8 auf RPi 3
Perl: v5.24.1

Offline SirMarco

  • Full Member
  • ***
  • Beiträge: 129
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #157 am: 19 Juli 2019, 12:27:04 »
Hat jemand eine Idee wie ich das Menü auf dem Smartphone scrollbar machen kann?

Liebe Grüsse

Offline djfflow

  • New Member
  • *
  • Beiträge: 6
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #158 am: 12 September 2019, 14:13:23 »
Hallo,

ich habe die Vorlage entsprechend angepasst und habe soviele Menüpunkte das gescrollt werden muss. Dies habe ich mit den Anpassungen von GeoCeKid hinbekommen. Leider verhält sich das dann so, dass die Menüleiste nur soweit mit der Hintergrundfarbe gefüllt wird wie der Monitor hoch ist. Alles was darüber hinaus geht, ist grau (siehe Anhang).
Wie kann man dieses Verhalten ändern, sodass alle Menüpunkte auf dem richtigen Hintergrund angezeigt werden?

Offline FosCo

  • New Member
  • *
  • Beiträge: 16
Antw:Tablet UI - responsive Design (flexbox)
« Antwort #159 am: 01 November 2019, 10:27:47 »
Hi, da ich das Thema https://forum.fhem.de/index.php/topic,104944.0.html nur für dieses Layout erstellt habe, verlinke ich die beiden Threads mal. Finde es deutlich bequemer so.

Lieben Dank auch an dieser Stelle nochmal für das Layout!
Es hat mir nicht nur ein wunderbares Gerüst verschafft, sondern auch den Umgang mit Templates gezeigt.