Wie wird die Dropdown-Liste mit dem langen Optionswert auf Mobilgeräten angezeigt?

Question

ich den folgenden Code auf dem mobilen und Desktop-Browser mit Bootstrap-Framework:

<select style="font-size:12px"> 
    <option value="A">A. This is long description for option selection A</option> 
    <option value="B">B. This is long description for option selection B</option> 
    <option value="C">C. This is long description for option selection C</option> 
    <option value="D">D. This is long description for option selection D</option> 
    <option value="E">E. This is long description for option selection E</option> 
</select> 

Dies ist kein Problem für Desktop-Browser, kann ich die font-size verwende es größer oder kleiner zu machen.

Aber wenn ich auf dem Handy, insbesondere im Hochformat, sehe, möchte ich, dass der Benutzer die vollständige Beschreibung aller Optionen sieht.

Die Dropdown-Auswahl für den Standard-Browser für Mobilgeräte beschränkt die lange Beschreibung auf die aktuelle Bildschirmbreite des Geräts.

Gibt es eine Lösung?

Was ist der beste Ansatz, um eine Dropdown-Liste mit langen Optionswert auf mobilen Geräten zu präsentieren?

Answer 1

Bitte verwenden Sie das Select2 Jquery-Plugin für die responsive Dropdown-Liste. Dies könnte dir helfen. https://select2.github.io/examples.html