0

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

Jeff Johny
  • 418
  • 1
  • 5
  • 19
  • problem caused by the css additions I think, not by `ng-if` – Bill P Dec 31 '19 at 08:20
  • 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 Dec 31 '19 at 09:27

1 Answers1

1

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>
Saghi Shiri
  • 537
  • 5
  • 19
  • Thanks saghi. Your solution is solid. But our application is too huge, we are not in a position to update everywhere. – Jeff Johny Jan 02 '20 at 09:43