2016-08-31 2 views
0

Ich habe ein Problem in mehreren Auswahlfeld. Ich habe einen Behälter mit fester Größe im Behälter Ich schreibe eine Mehrfachauswahlbox.Wählen Sie mehrere: Problem bei der Auswahl lange Option

Die Optionswerte haben lange beschreibende Daten. Also muss ich overflow-x : auto geben, um irgendwelche Daten auszuwählen und horizontal zu rollen, um den Inhalt zu lesen.

Wenn ich irgendwelche Daten auswähle und versuche, horizontal zu scrollen, um den gesamten Inhalt zu lesen, ist der andere Teil der Information, die sichtbar sein sollte, nicht sichtbar (was nicht sichtbar war, da wir scrollen müssen).

Fügen Sie diesen Beispielcode ein, wählen Sie alle Daten aus und versuchen Sie, horizontal zu scrollen, und Sie sehen, dass die Informationen teilweise ausgewählt sind.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My Application</title> 

    <style type="text/css"> 
    .test{ 
    width:300px; 
    } 
    select{ 
    width: 100%; 
    overflow-x: scroll; 
    } 
    </style> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script> 

</head> 
<body> 
<div class="test"> 
    <select name="myMultipleTest" id="myMultipleTest" multiple="multiple"> 
    <option value="A101">This is a sample long text which contains some information</option> 
    <option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option></select> 

</div></body> 
</html> 

Antwort

1

hier funktioniert es

.test { 
 
    width: 300px; 
 
} 
 
select { 
 
    width: 200px; 
 
} 
 
select option { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
}
<div class="test"> 
 
    <select name="myMultipleTest" id="myMultipleTest" multiple="multiple"> 
 
    <option value="A101">This is a sample long text which contains some information</option> 
 
    <option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option> 
 
    </select> 
 
</div>

Ich denke, Ihr Problem war, dass das Auswahlfeld keine feste Breite hat und man ändert die select ‚s overflow-x statt von option s '
trotzdem empfehle ich Ihnen, eine Bibliothek zu verwenden, um Tooltips für weitere Informationen inst E-Mail von einer langen Innenseite einer Option, würde ich bevorzugen hint.css

Verwandte Themen