AngularUI Bootstrap Popover Flickers
Check out the plunker example:
<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, the popover is displayed in the upper left corner of the page for a short time than in the correct position. How can I prevent this flicker?
+6
1 answer
A possible solution is to integrate angular -animate to enable fade-in. Just insert <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> into your head and register the module in script.js: angular.module('app', ['ui.bootstrap', 'ngAnimate']);
See the demo here: http://plnkr.co/edit/NJU9F9ETHe2qMczY8knl?p=preview
Hope this helps!
+3