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?
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With