Search code examples
angularjsangular-ui-bootstrapdropdown

angularjs bootstrap dropdown width issue

Here is my code for display a dropdown. How can I align the dropdown so that it occupies the border shown in RED line ?. Basically I want to increase the width of the dropdown box.

<div class="dropdown">
    <button id="btn-append-to-single-button" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        {{ editUser.SelectedStatusName}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-left"  aria-labelledby="btn-append-to-single-button">
        <li ng-repeat="a in editUser.StatusList">
            <a ng-click="editUser.change(a)"> {{a.Name}}</a>
        </li>
    </ul>
</div>

enter image description here

Solution

  • Its as simple as defining a CSS rule for the button:

      <button style="width:(value that you want)" id="btn-append-to-single-button" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        {{ editUser.SelectedStatusName}} <span class="caret"></span>
  </button>

    Here is a js fiddle showing the button with width:100%: https://jsfiddle.net/x7253v4b/