david david - 1 year ago 131
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 popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}">Popover {{placement.selected}}</div>

And here is the plunkr to test it.


Answer Source

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>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download