CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
zarax
zarax

Reputation: 831

AngularUI Bootstrap Popover Flickers

Check that plunker example:

Plunker

<body ng-app="app">
<div class="flexbox margin-top">
<div class="flexible"></div>
<div class="flexbox">
  <button class="btn btn-sm btn-success" popover-template="'template.html'" popover-placement="left">Click</button>
</div>
</div>
<script type="text/ng-template" id="template.html">
<div>
  <textarea>Some text, some text, some text</textarea>
  <button class="btn btn-sm">Update</button>
</div>
</script>

When I click the button, popover shows up at the left top corner of the page for a short time than it goes to its correct position. How can I prevent that flicker?

Upvotes: 6

Views: 1220

Answers (1)

djaax
djaax

Reputation: 249

A possible solution is to integrate angular-animate to enable the fade-in. Just insert <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> into the head and register the module in your script.js: angular.module('app', ['ui.bootstrap', 'ngAnimate']);

See a demo here: http://plnkr.co/edit/NJU9F9ETHe2qMczY8knl?p=preview

Hope it helps!

Upvotes: 3

Related Questions