I have about 13 items in my list, so I'd like to make my dropdown menu in ui-bootstrap have at least two columns. Right now, here is my html for the button:
<div class="btn-group" uib-dropdown keyboard-nav>
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
Graph By Indications<span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test2" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
</ul>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test1" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
</ul>
</div>
Right now, I end up with separate columns on top of each other, and I'm trying to get them beside each other. I've tried the wrapping the <ul> tags with a <div class="row">...</div>, but that just stops the dropdown from working altogether.
Here is the what the above code produces:
