Die Option HTML des SELECT-Tags hebt Text teilweise hervor

Wenn ich die Option auswähle und horizontal scrolle, um den gesamten Inhalt zu lesen, wird nur ein Teil des Inhalts angezeigt, aber das Abwählen und Scrollen zeigt den vollständigen Inhalt.Die Option HTML des SELECT-Tags hebt Text teilweise hervor

Wie überwinde ich das? Einfache Antworten sind bemerkenswert!

Problem Beispiel:

horizontal scrollen nach Auswahl Option

horizontal scrollen nach Abwahl Option

EDIT 1:

Was tatsächlich passiert ist, werden die Mitglieder zu HTML dynamisch hinzugefügt. Ich benutze Bootstrap und JQuery Frameworks.

<script src="https://code.jquery.com/jquery-2.2.1.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!DOCTYPE html> 
 

 

 
\t <head> 
 
\t \t <title> Select - Option example </title>  
 
\t \t 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t \t <div class="container"> \t \t \t 
 
\t \t \t <form class="row form-horizontal" id="admin_promote_members"> 
 
       
 
       <div class="form-group"> 
 
        <div class="col-sm-2 col-xs-6"> 
 
         <h3 style="text-align: center">Admins</h3> 
 
         <select class="form-control" id="admin_view_admins" size="10" style="overflow:auto;"> 
 
          <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
         </select> 
 
         <div style="padding-top: 20px; text-align: center;"> 
 
          <button type="button" class="btn btn-danger" id="admin_admin_demote"><text> &lt;&lt; </text>Demote</button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </body>

EDIT 2 (Lösung): Als @yuri vorgeschlagen, chaning CSS „-Option. {Display: table;} löste das Problem

Quelle

2016-06-27 Naveen Kumar V

können Sie bitte Ihren Code teilen, ist es schwer, von Bild zu verstehen. – bhansa

@Bhansa Hinzugefügt. Die horizontale Bildlaufleiste wird jedoch nicht angezeigt. –

Sorry @Naveen, aber ich bekomme kein Problem oder Scrollbar in meinem Browser, selbst nachdem ich auf meinem System ausgeführt habe. – bhansa

Sie können versuchen, Stylen <option> Tags mit:

option {display: table}

Fiddle

Werfen Sie einen Blick auch auf text-overflow, word-wrap und diesen Text beschneidenden Regeln

Quelle

2016-06-27 09:03:06 Yuri

Die Option HTML des SELECT-Tags hebt Text teilweise hervor

Antwort

Verwandte Themen