0

Meine Geige ist here. Es basiert auf Antworten auf this post.Inline-Elemente im Bootstrap-Selectpicker-Dropdown

Current selectpicker

Es ist ein einfaches selectpicker mit Symbolen anstelle von Text.

Ich möchte, dass Benutzer in der Lage sind, ein Symbol aus einer Liste auszuwählen. Da es jedoch eine große Anzahl von sehr kleinen Symbolen gibt, möchte ich, dass sie in einer 2D-Tabelle/einem Gitter/einer Matrix innerhalb des Dropdown-Menüs angezeigt werden (derzeit wird ein Symbol pro Zeile angezeigt). Die Anzahl der Spalten in der Tabelle sollte basierend auf der Seitenbreite skaliert werden.

Ich sehe es als simple colorpicker mit Symbolen anstelle von Farben.

Ich bin bereit, eine andere Steuerung zu verwenden, wenn nicht eine bootstrap-selectpicker.

Antwort

1

Hier ist ein Beispiel Bootstrap-Select mit: die Liste Dropdown-Menü ändern inline-block anzuzeigen, während die float zu entfernen. Dann können Sie eine Breite und jedes andere Styling festlegen, das Sie benötigen.

Arbeitsbeispiel:

$('select').selectpicker();
.bootstrap-select .dropdown-menu { 
 
    padding: 5px; 
 
} 
 
.bootstrap-select .dropdown-menu > li { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: none; 
 
    text-align: center; 
 
    width: 20%; 
 
} 
 
@media (min-width: 768px) { 
 
    .bootstrap-select .dropdown-menu > li { 
 
    width: 10%; 
 
    } 
 
    .bootstrap-select .dropdown-menu > li > a { 
 
    font-size: 22px; 
 
    } 
 
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"> 
 
<div class="container"> 
 
    <label class="control-label" for="icon">Select icon</label> 
 
    <select class="form-control selectpicker" id="icon" name="icon" required> 
 
    <option value=9784>&#9784;</option> 
 
    <option value=9785>&#9785;</option> 
 
    <option value=9786>&#9786;</option> 
 
    <option value=9787>&#9787;</option> 
 
    <option value=9788>&#9788;</option> 
 
    <option value=9789>&#9789;</option> 
 
    <option value=9790>&#9790;</option> 
 
    <option value=9791>&#9791;</option> 
 
    <option value=9792>&#9792;</option> 
 
    <option value=9793>&#9793;</option> 
 
    <option value=9794>&#9794;</option> 
 
    <option value=9795>&#9795;</option> 
 
    <option value=9796>&#9796;</option> 
 
    <option value=9797>&#9797;</option> 
 
    <option value=9798>&#9798;</option> 
 
    <option value=9799>&#9799;</option> 
 
    <option value=9800>&#9800;</option> 
 
    <option value=9801>&#9801;</option> 
 
    <option value=9802>&#9802;</option> 
 
    <option value=9803>&#9803;</option> 
 
    <option value=9804>&#9804;</option> 
 
    <option value=9805>&#9805;</option> 
 
    <option value=9806>&#9806;</option> 
 
    <option value=9807>&#9807;</option> 
 
    <option value=9808>&#9808;</option> 
 
    <option value=9809>&#9809;</option> 
 
    <option value=9810>&#9810;</option> 
 
    <option value=9811>&#9811;</option> 
 
    <option value=9812>&#9812;</option> 
 
    <option value=9813>&#9813;</option> 
 
    <option value=9814>&#9814;</option> 
 
    <option value=9815>&#9815;</option> 
 
    <option value=9816>&#9816;</option> 
 
    <option value=9817>&#9817;</option> 
 
    <option value=9818>&#9818;</option> 
 
    <option value=9819>&#9819;</option> 
 
    <option value=9820>&#9820;</option> 
 
    <option value=9821>&#9821;</option> 
 
    <option value=9822>&#9822;</option> 
 
    <option value=9823>&#9823;</option> 
 
    <option value=9824>&#9824;</option> 
 
    <option value=9825>&#9825;</option> 
 
    <option value=9826>&#9826;</option> 
 
    <option value=9827>&#9827;</option> 
 
    <option value=9828>&#9828;</option> 
 
    <option value=9829>&#9829;</option> 
 
    <option value=9830>&#9830;</option> 
 
    <option value=9831>&#9831;</option> 
 
    <option value=9832>&#9832;</option> 
 
    <option value=9833>&#9833;</option> 
 
    <option value=9834>&#9834;</option> 
 
    <option value=9835>&#9835;</option> 
 
    <option value=9836>&#9836;</option> 
 
    <option value=9837>&#9837;</option> 
 
    <option value=9838>&#9838;</option> 
 
    <option value=9839>&#9839;</option> 
 
    <option value=9840>&#9840;</option> 
 
    <option value=9841>&#9841;</option> 
 
    <option value=9842>&#9842;</option> 
 
    <option value=9843>&#9843;</option> 
 
    <option value=9844>&#9844;</option> 
 
    <option value=9845>&#9845;</option> 
 
    <option value=9846>&#9846;</option> 
 
    <option value=9847>&#9847;</option> 
 
    <option value=9848>&#9848;</option> 
 
    <option value=9849>&#9849;</option> 
 
    <option value=9850>&#9850;</option> 
 
    <option value=9851>&#9851;</option> 
 
    <option value=9852>&#9852;</option> 
 
    <option value=9853>&#9853;</option> 
 
    <option value=9854>&#9854;</option> 
 
    <option value=9855>&#9855;</option> 
 
    <option value=9856>&#9856;</option> 
 
    <option value=9857>&#9857;</option> 
 
    <option value=9858>&#9858;</option> 
 
    <option value=9859>&#9859;</option> 
 
    <option value=9860>&#9860;</option> 
 
    <option value=9861>&#9861;</option> 
 
    <option value=9862>&#9862;</option> 
 
    <option value=9863>&#9863;</option> 
 
    <option value=9864>&#9864;</option> 
 
    <option value=9865>&#9865;</option> 
 
    <option value=9866>&#9866;</option> 
 
    <option value=9867>&#9867;</option> 
 
    <option value=9868>&#9868;</option> 
 
    <option value=9869>&#9869;</option> 
 
    <option value=9870>&#9870;</option> 
 
    <option value=9871>&#9871;</option> 
 
    <option value=9872>&#9872;</option> 
 
    <option value=9873>&#9873;</option> 
 
    <option value=9874>&#9874;</option> 
 
    <option value=9875>&#9875;</option> 
 
    <option value=9876>&#9876;</option> 
 
    <option value=9877>&#9877;</option> 
 
    <option value=9878>&#9878;</option> 
 
    <option value=9879>&#9879;</option> 
 
    <option value=9880>&#9880;</option> 
 
    <option value=9881>&#9881;</option> 
 
    <option value=9882>&#9882;</option> 
 
    </select> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

+0

Dank. Dies tut genau das, was ich brauchte, aber es betrifft alle selectpickers ([fiddle] (https://jsfiddle.net/1y2Lf5y8/1/)). Falls jemand dieses Problem in der Zukunft hat, habe ich gerade einen benutzerdefinierten Selektor ([fiddle] (https://jsfiddle.net/1y2Lf5y8/2/)) angegeben. – Jedi

1

Sie können col-md-6 (oder wie viele Sie auch immer pro Zeile möchten) auf jedes Ihrer Dropdown-Elemente anwenden, genau wie bei jedem anderen Element. sample

<div class="btn-group"> 
    <ul class="nav pull-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Icon x2 Menu <b class="caret"></b></a> 
      <ul class="dropdown-menu" id="icons"><li class="dropdown-header">Glyphicons</li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.adjust"><a href="#"><i class="glyphicon glyphicon-adjust"></i></a></li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_center"><a href="#"><i class="glyphicon glyphicon-align-center"></i></a></li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_justify"><a href="#"><i class="glyphicon glyphicon-align-justify"></i></a></li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_left"><a href="#"><i class="glyphicon glyphicon-align-left"></i></a></li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_right"><a href="#"><i class="glyphicon glyphicon-align-right"></i></a></li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_down"><a href="#"><i class="glyphicon glyphicon-arrow-down"></i></a></li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_left"><a href="#"><i class="glyphicon glyphicon-arrow-left"></i></a></li> 
      <li class="pickList col-md-6 text-center" value="Icons.Glyphicons.bell"><a href="#"><i class="glyphicon glyphicon-bell"></i></a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
Verwandte Themen