Ankündigung

Einklappen
Keine Ankündigung bisher.

Select Dropdown außerhalb des Fensters

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Select Dropdown außerhalb des Fensters

    Guten abend zusammen,

    mir ist kürzlich bei einer Oberfläche ein merkwürdiges Phänomen aufgefallen:

    Innerhalb eines Containers, der ab einem bestimmten Umbruchpunkt (Tablet und Smartphone) breiter als das Fenster wird und deswegen overflow-x: auto hat, liegt ein Formular.

    Das Formular ist durch den Container ebenfalls horizontal scrollbar, soweit so gut.

    Betätigt man auf dem Tablet- oder Smartphone-Format aber ein Select-Feld aus dem Formular, dann bricht die Liste mit den Optionen aus dem Fenster aus (was man wohl auf einem Smartphone nicht sehen sollte), aber auf dem Desktop eben, da der Container durch das overflow-x: auto ja (eigentlich) genug Breite mitbringt.

    Hat jmd. eine Idee oder einen Ansatzpunkt, wie man dieses Verhalten vermeiden kann?

    Hier ein simples Fiddle:

    https://jsfiddle.net/pb5f9qr5/

    Wenn man die Breite dieses Fensters auf unter 500px verringert und dann das Select-Feld betätigt, sieht man das oben beschriebene Verhalten.

    Was kann man tun, damit die Liste mit den Optionen nicht aus dem Fenster ausbricht?

  • #2
    Select Elemente werden, ausser bei Firefox, vom Betriebssystem übernommen, daher hat man da wenig Einfluss drauf.

    Zitat von wario Beitrag anzeigen
    Hat jmd. eine Idee oder einen Ansatzpunkt, wie man dieses Verhalten vermeiden kann?
    Es macht Sinn hier mit %-Angaben zu arbeiten anstatt feste Werte vorzugeben. Passt der Inhalt der Option-Elemente dann nicht in das Feld, kann man immer noch eine Mindestbreite in em vorgeben, wobei man dann aber mit beschriebenen Verhalten leben muss.

    EDIT:
    Tests haben jetzt gezeigt, dass wenn der Inhalt nicht in das Option Element passt, es dann doch wieder grösser dargestellt wird. Es bleibt einem wohl nichts anderes übrig als damit zu leben oder die Inhalte kurz zu fassen.

    Kommentar


    • #3
      Hi und dank dir für deine Antwort.

      Das Problem bei meiner (reellen) Seite ist nicht der Inhalt der Options und damit ihre Breite oder die des Select-Feldes oder das ich dem Feld selbst eine feste Breite wie im Beispiel-Fiddle gegeben hätte.

      Ich baue meine responsiven Formulare auch so, dass sie bei einem bestimmten Punkt umbrechen, d.h. das horizontale Zeilen mit mehreren Feldern dann vertikal dargestellt werden, das ist auch kein Problem.

      In dem speziellen (reellen) Fall befindet sich das Formular direkt überhalb einer Tabelle, die vergleichsweise breit ist. Und der einfachste Weg, Tabellen responsiv zu gestalten (siehe auch Bootstrap, etc.) ist ja ihnen schlicht ein horizontales Overflow zu geben. Womit ich dann auf das von mir im Ausgangspost beschriebene Verhalten komme.

      Die Seite bricht um, das Formular alleine würde keinen Overflow erzeugen, womit die Options auch im Sichtfenster wären, aber die Tabelle ist so breit, das der Container natürlich ebenfalls ihre Breite hat und das responsive Formular sich dementsprechend ausdehnt. Und die Select-Felder und ihre Options sind automatisch breiter als das Sichtfenster.

      Kommentar


      • #4
        Dann zeig doch mal die ganze Geschichte.

        Kommentar

        Lädt...
        X