ebody: 2 Dropdown Menüs - Button nebeneinander, aber Dropdownliste über volle Breite - ist das möglich?

Hallo,

https://codepen.io/anon/pen/rqVQBb

Die beiden Button sollen nebeneinander stehen. Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

Ich habe schon sehr viel ausprobiert, daher wollte ich fragen, ob das Ziel mit diesem HTML Code, mit dieser Verschachtelung überhaupt möglich ist?

.dropdown muss ja 100% haben, wenn die darin verschachtelte Dropdownliste <ul class="dropdown-menu"...> über die volle Breite gezeigt werden soll oder?

Gruß ebody

  1. Lieber ebody,

    https://codepen.io/anon/pen/rqVQBb

    Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

    ja, und? Wo ist das Problem?

    .dropdown muss ja 100% haben, wenn die darin verschachtelte Dropdownliste <ul class="dropdown-menu"...> über die volle Breite gezeigt werden soll oder?

    Ja, und? Wo ist das Problem? Etwa das hier?

    .dropdown{
      float: left;
      width: 100%;
    }
    		
    .btn-default{
      width: 50%;
    }
    

    Die Buttons sollen nur 50% Breite haben? Ja?

    Liebe Grüße,

    Felix Riesterer.

    1. @@Felix Riesterer

      Die Buttons sollen nur 50% Breite haben? Ja?

      Nein. Es sollen gar keine Buttons sein.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. Lieber Felix,

      solche "Antworten" wie deine sagen sehr viel über den Charakter. Bist Du frustriert, unzufrieden mit dir? Komm ich drück dich mal, wird alles gut.

      Und falls du es nicht gesehen hast, darum geht es.

      Die beiden Button sollen nebeneinander stehen. Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

      LG und sei nicht so frustriert! ebody

      1. @@ebody

        solche "Antworten" wie deine sagen sehr viel über den Charakter.

        ??

        Und falls du es nicht gesehen hast, darum geht es.

        Die beiden Button sollen nebeneinander stehen.

        Nein, darum geht es nicht. Es geht nicht um Buttons, sondern um <select>-Elemente, die nebeneinander stehen sollen.

        Das geht am einfachsten mit Grid (zumindest solange, bis Browser die CSS-Eigenschaft gap verstehen und auch bei Flexboxen anwenden). Keine Media-Queries nötig; einfach Mindestbreite und Zwischenraum angeben, fertig.

        Beispiel

        Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

        Die Dropdownliste ist außerhalb deiner Macht. Dafür sieht sie genau so aus, wie der Nutzer es auf ihrem Gerät erwartet. Auf dem iPhone bspw. so:

        Screenshot

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @@ebody

    ob das Ziel mit diesem HTML Code, mit dieser Verschachtelung überhaupt möglich ist?

    Das Ziel sollte sein: benutzbare Webseiten zu erstellen. Nein, das ist mit diesem Code nicht möglich.

    Dein Fehler ist, <select>/<option> mit anderen Elementen nachbauen zu wollen. Da kann nichts Gutes bei rauskommen.

    Verwende <select>/<option>.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      das Ziel sollte es doch sein, eine Darstellung zu finden die der Semantik gerecht ist.

      Wird da etwas in einem Form aus einer Auswahlliste ausgewählt? Oder ist das ein Menü? Dementsprechend sollte es select sein, oder Links die als paralleles Dropdown gestaltet sind.

      Allerdings fände ich es bei einem Dropdown Menü merkwürdig, wenn die Dropdown-Menüpunkte jeweils unter beiden Menüpunkten sind. Bei einer horizontalen Menüleiste und darunter senkrecht angeordneten Dropdown-Menüpunkten würde ich eigentlich erwarten, dass Haupt- und Submenü nach irgendeiner konsistenten Regel aneinander ausgerichtet sind.

      Rolf

      --
      sumpsi - posui - clusi
      1. @@Rolf B

        Wird da etwas in einem Form aus einer Auswahlliste ausgewählt? Oder ist das ein Menü?

        Es sieht aus wie Auswahlliste, also werden es wohl Auswahllisten sein. Wenn es Menüs sein sollten, liegt der Fehler darin, dass sie aussehen wie Auswahllisten.

        das Ziel sollte es doch sein, eine Darstellung zu finden die der Semantik gerecht ist.

        Du sagst es.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. hallo

        das Ziel sollte es doch sein, eine Darstellung zu finden die der Semantik gerecht ist.

        Eigentlich muss die Absicht klar werden. Was will ich letztendlich erreichen. Dann sucht man dazu die passenden Instrumente (das geeignete HTML). Zuletzt optimiert man das ganze.

        Gunnar ist zu optimistisch darin, die Absicht zu erkennen.

        Ich muss nur das Ganze in ein <nav> Element einpacken. Dann dürften Formularelemente wohl nur Ausnahmsweise gefragt sein. Aber selbst wenn es sich um was anderes handelt, ist der Vorschlag über select suboptimal. Selectboxen sind arme Brüder wenn es darum geht, die einzelnen Menu-Einträge funtional anzureichern. Jeder der ein Menu gesehen hat, weiss, dass ein Eintrag bereits eine Sammlung verschiedener Funtionen oder Hints ist. Zuletzt kommt die Erwartung des Users, der NICHT davon ausgeht, dass eine Auswahl sofort ausgeführt wird. Gerade das mag aber hier erwünscht sein.