CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
David
David

Reputation: 3614

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!

Upvotes: 0

Views: 1642

Answers (2)

Nobal Mohan
Nobal Mohan

Reputation: 486

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

Upvotes: 1

J-Mean
J-Mean

Reputation: 1200

Please change your popover as follows:- Just add class="btn btn-default" in your code and your pop-over will not displace. Note:- there is still minor css fix required.

<div popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" class="btn btn-default">Popover {{placement.selected}}</div>

Upvotes: 0

Related Questions