AngularJs UI Bootstrap dropdown position is miscalculated while adding ngif for dropdown-menu

Question

AngularJs UI Bootstrap is miscalculating position of dropdown while adding ng-if condition for ui element holding 'dropdown-menu' class.

AngularJs UI Bootstrap version - 0.3.13 AngularJs version - 1.3.17

This is a plunker where issue is regenerated - http://next.plnkr.co/edit/sSXH5KeMQymaFNpG

<div class="btn-group" dropdown dropdown-append-to-body>
  <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdown-toggle>
     Dropdown on Body <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" ng-if="myFlag" role="menu" aria-labelledby="btn-append-to-body"></ul>
</div>

Expecting some solution from ui-bootstrap

No Bill. I added dropdown-append-to-body attribute for appending the dropdown to the body, not inside the given element. But here its not appending to the body — Jeff Johny
– Jeff Johny, Commented Dec 31, 2019 at 9:27

Saghi Shiri · Accepted Answer · 2019-12-31 14:39:20Z

ng-if will create an isolated child scope and it removes the element from the DOM when the condition is false and only adds the element back once the condition turns true, while ng-show just toggle the appearance of the element by adding the CSS display: none style.

You can use ng-show instead:

<ul class="dropdown-menu" ng-show="myFlag" role="menu" aria-labelledby="btn-append-to-body">
      <li role="menuitem"><a href="#">Action</a></li>
      <li role="menuitem"><a href="#">Another action</a></li>
      <li role="menuitem"><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>

Thanks saghi. Your solution is solid. But our application is too huge, we are not in a position to update everywhere.

Collectives™ on Stack Overflow

AngularJs UI Bootstrap dropdown position is miscalculated while adding ngif for dropdown-menu

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related