title: Setting the list width of Angular UI dropdown
body: <p><a href="http://plnkr.co/edit/SjmkxrCaa73HchXoK8Ct?p=preview" rel="nofollow noreferrer">In this plunk</a> 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.</p>
  
  <p>I also set the maximum width, as the list is too wide, but this doesn't work. Any ideas how to fix it?</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div class="btn-group" uib-dropdown&gt;
      &lt;button id="btn-append-to-body" type="button" class="btn btn-primary" 
             uib-dropdown-toggle=""&gt;
            {{selection}} &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;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"&gt;
         &lt;li role="menuitem"&gt;
            &lt;a href="#" ng-click="selectItem('1')"&gt;1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
            &lt;a href="#" ng-click="selectItem('2')"&gt;2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
            &lt;a href="#" ng-click="selectItem('3')"&gt;3&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
            &lt;a href="#" ng-click="selectItem('4')"&gt;4&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
            &lt;a href="#" ng-click="selectItem('5')"&gt;5&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
            &lt;a href="#" ng-click="selectItem('6')"&gt;6&lt;/a&gt;
          &lt;/li&gt;
          &lt;li role="menuitem"&gt;
            &lt;a href="#" ng-click="selectItem('7')"&gt;7&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>