1

When I go to the last row (no. 25) and click edit you will see that the dropdown it's cropped out. Can you figure out how to solve this issue?

enter image description here

https://plnkr.co/edit/22e9bo?p=preview

<div ui-scroll-viewport class="col-md-12" style="height: 500px; border: dashed 1px #ddd;">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>id</th>
        <th>source</th>
        <th>destination</th>
      </tr>
    </thead>
    <tbody>
      <tr ui-scroll="item in datasource">
        <td>{{item.id}} <a ng-click="showDropdown(item.id)">edit</a></td>
        <td>{{item.source}}</td>
        <td ng-if="dropdowns.active !== item.id">{{item.destination}}</td>
        <td ng-if="dropdowns.active === item.id">
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            {{item.destination}}
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#">10.0.0.0</a></li>
              <li><a href="#">10.255.255.255</a></li>
              <li><a href="#">172.16.0.0</a></li>
              <li><a href="#">172.31.255.255</a></li>
              <li><a href="#">192.168.255.255</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">192.168.0.0</a></li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
dhilt
  • 18,707
  • 8
  • 70
  • 85
Adrian
  • 9,102
  • 4
  • 40
  • 35

1 Answers1

0

Generally, this is not the ui-scroll issue, this is how the Bootstrap hosts it's dropdown menu in DOM. If the hoster element has overflow-y: scroll, then you'll get the situation you described in your question. As an angular-way solution I would suggest to use angular-ui wrapper for the Bootstrap: https://angular-ui.github.io/bootstrap/.

They have Dropdown directive which has dropdown-append-to and dropdown-append-to-body settings which allow you to append your Bootstrap dropdown to any element. This will solve the issue.

dhilt
  • 18,707
  • 8
  • 70
  • 85