Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 798
zarax Avatar asked Sep 12 '15 15:09

zarax


1 Answers

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!

like image 73
djaax Avatar answered Nov 11 '22 12:11

djaax