Setting the list width of Angular UI dropdown

Question

In this plunk I have an Angular UI dropdown list with a maximum height for the selection list. This works fine, and the user can scroll through the list.

I also set the maximum width, as the list is too wide, but this doesn't work. Any ideas how to fix it?

HTML

  <div class="btn-group" uib-dropdown>
    <button id="btn-append-to-body" type="button" class="btn btn-primary" 
           uib-dropdown-toggle="">
          {{selection}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" 
        style="max-height:80px;max-width:20px;overflow-y:auto"
        aria-labelledby="btn-append-to-body">
       <li role="menuitem">
          <a href="#" ng-click="selectItem('1')">1</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('2')">2</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('3')">3</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('4')">4</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('5')">5</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('6')">6</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('7')">7</a>
        </li>
    </ul>
  </div>

JB Nizet · Accepted Answer · 2018-01-03 18:47:07Z

2

If you inspect the styles of the ul using your browser dev tools, you'll see that it has a min-width set to 160px. Set if to a value that is lower than or equal to your max-width, and you'll have what you want.

answered Jan 3, 2018 at 18:47

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

Setting the list width of Angular UI dropdown

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