Creating a two column dropdown in angular-ui-bootstrap

Question

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:

You can create your own template for any of the angular-ui components. In fact if you use the non templated version can create all your own templates also — charlietfl
– charlietfl, Commented Jan 25, 2016 at 22:40

heliotrope · Accepted Answer · 2016-02-16 16:06:27Z

Using one <ul> and having both the <li> elements within columns in a <row> will create the two column list I was looking for.

<div class="btn-group" uib-dropdown uib-keyboard-nav style="border-bottom: #357ebd 3px solid; border-radius: 10px">
          <button class="btn btn-primary" ng-click="clearVals()">Clear</button>
          <button type="button" class="btn btn-primary">
            {{ displayedIndication }}
              </button>
          <button  type="button" class="btn btn-primary" uib-dropdown-toggle>
            <span class="caret"></span>
          </button>
              <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" style="margin-right:-120px">
                <div class="row" style="padding-left:7px; padding-right:7px">
                  <div class="col-sm-6" style="padding-left:-7px">
                    <li class="nav-item" ng-repeat="item in indList" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
                  </div>
                  <div class="col-sm-6">
                    <li class="nav-item" ng-repeat="item in indList2" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
                  </div>
                </div>
              </ul>
            </div>

I used inline styles just to show that there are a bit of tweaks you'll need to make to have the lists look clean and even spaced without overlapping. Heres the result:

Collectives™ on Stack Overflow

Creating a two column dropdown in angular-ui-bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related