david david - 14 days ago 7
AngularJS Question

uib-popover not working as expected with a DIV element

I'm testing uib-popover and everything seems to work fine in the plunkr but when I change button to div then the popup seems displaced.

Any idea why?

This is the code, simplified from the official plunkr

<div ng-controller="PopoverDemoCtrl">
<div class="form-group">
<label>Popover placement</label>
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
</div>
<div popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}">Popover {{placement.selected}}</div>
</div>


And here is the plunkr to test it.

Thanks!

Answer

div is a block element while button is an inline-block element. Add style: inline-block to div, it work as expected.

<div style="display: inline-block;" popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}">Popover {{placement.selected}}</div>

https://plnkr.co/edit/0UDLTv3ATEtXEjYnJQHF?p=preview