0

My fiddle is here. It is based on answers to this post.

Current selectpicker

It is a simple selectpicker with icons instead of text.

I'd like users to be able to select an icon from a list. However, since there is a large number of very small icons, I'd like to have them display in a 2D table/grid/matrix within the dropdown (currently it shows one icon per row) . The number of columns within the table should scale based on the page width.

I picture it as a simple colorpicker with icons instead of colors.

I'm willing to use a different control, if not a bootstrap-selectpicker.

Improve this question

2 Answers 2

Reset to default
1

Here's an example using Bootstrap-Select: change the dropdown-menu list to display inline-block while removing the float. Then you can set a width and any other styling you may need.

Working Example:

$('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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks. This does exactly what I needed, but it impacts all selectpickers (fiddle). In case anyone has this issue in the future, I just specified a custom selector (fiddle).
1

You can apply col-md-6 (or however many you want per line) to each of your dropdown items, just as you would with any other 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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.