Inline elements within bootstrap selectpicker dropdown - css

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>☸</option>
<option value=9785>☹</option>
<option value=9786>☺</option>
<option value=9787>☻</option>
<option value=9788>☼</option>
<option value=9789>☽</option>
<option value=9790>☾</option>
<option value=9791>☿</option>
<option value=9792>♀</option>
<option value=9793>♁</option>
<option value=9794>♂</option>
<option value=9795>♃</option>
<option value=9796>♄</option>
<option value=9797>♅</option>
<option value=9798>♆</option>
<option value=9799>♇</option>
<option value=9800>♈</option>
<option value=9801>♉</option>
<option value=9802>♊</option>
<option value=9803>♋</option>
<option value=9804>♌</option>
<option value=9805>♍</option>
<option value=9806>♎</option>
<option value=9807>♏</option>
<option value=9808>♐</option>
<option value=9809>♑</option>
<option value=9810>♒</option>
<option value=9811>♓</option>
<option value=9812>♔</option>
<option value=9813>♕</option>
<option value=9814>♖</option>
<option value=9815>♗</option>
<option value=9816>♘</option>
<option value=9817>♙</option>
<option value=9818>♚</option>
<option value=9819>♛</option>
<option value=9820>♜</option>
<option value=9821>♝</option>
<option value=9822>♞</option>
<option value=9823>♟</option>
<option value=9824>♠</option>
<option value=9825>♡</option>
<option value=9826>♢</option>
<option value=9827>♣</option>
<option value=9828>♤</option>
<option value=9829>♥</option>
<option value=9830>♦</option>
<option value=9831>♧</option>
<option value=9832>♨</option>
<option value=9833>♩</option>
<option value=9834>♪</option>
<option value=9835>♫</option>
<option value=9836>♬</option>
<option value=9837>♭</option>
<option value=9838>♮</option>
<option value=9839>♯</option>
<option value=9840>♰</option>
<option value=9841>♱</option>
<option value=9842>♲</option>
<option value=9843>♳</option>
<option value=9844>♴</option>
<option value=9845>♵</option>
<option value=9846>♶</option>
<option value=9847>♷</option>
<option value=9848>♸</option>
<option value=9849>♹</option>
<option value=9850>♺</option>
<option value=9851>♻</option>
<option value=9852>♼</option>
<option value=9853>♽</option>
<option value=9854>♾</option>
<option value=9855>♿</option>
<option value=9856>⚀</option>
<option value=9857>⚁</option>
<option value=9858>⚂</option>
<option value=9859>⚃</option>
<option value=9860>⚄</option>
<option value=9861>⚅</option>
<option value=9862>⚆</option>
<option value=9863>⚇</option>
<option value=9864>⚈</option>
<option value=9865>⚉</option>
<option value=9866>⚊</option>
<option value=9867>⚋</option>
<option value=9868>⚌</option>
<option value=9869>⚍</option>
<option value=9870>⚎</option>
<option value=9871>⚏</option>
<option value=9872>⚐</option>
<option value=9873>⚑</option>
<option value=9874>⚒</option>
<option value=9875>⚓</option>
<option value=9876>⚔</option>
<option value=9877>⚕</option>
<option value=9878>⚖</option>
<option value=9879>⚗</option>
<option value=9880>⚘</option>
<option value=9881>⚙</option>
<option value=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>

Answer 2

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">
Icon x2 Menu <b class="caret"></b>
<ul class="dropdown-menu" id="icons"><li class="dropdown-header">Glyphicons</li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.adjust"><i class="glyphicon glyphicon-adjust"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_center"><i class="glyphicon glyphicon-align-center"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_justify"><i class="glyphicon glyphicon-align-justify"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_left"><i class="glyphicon glyphicon-align-left"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_right"><i class="glyphicon glyphicon-align-right"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_down"><i class="glyphicon glyphicon-arrow-down"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_left"><i class="glyphicon glyphicon-arrow-left"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.bell"><i class="glyphicon glyphicon-bell"></i></li>
</ul>
</li>
</ul>
</div>