Inline elements within bootstrap selectpicker dropdown

Question

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

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.

Answer 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>