2

I'm trying to add a popover (bootstrap v3.3.7) in my angularJs app, I can successfully add a popover like this:

<div uib-popover="Hello" popover-title="Test" popover-placement="bottom-left" popover-trigger="'outsideClick'"></div>

this works perfectly, now how can I do something like I did with bootstrap modals, having an external htm file as template where I can put all the data I wanna show in the popover?

I tried creating a htm page with some DIVs, and link it in the popover like this:

 popover-template="'Views/Popovers/myPopoverTemplate.htm'"

but it doesn't work. What am I doing wrong? thank you

popover

external template: 

<div class="testbox">
<div>
    <div>
        <h3>test header</h3>
    </div>
    <div>
        <span>test body</span>

        <div>
            <button class="btn btn-default" type="button" ng-click=""><i class="fa fa-close"></i> Footer - Buttons go here</button>
        </div>
    </div>
</div>

css for the template:

.testbox {
background: #fff;
color: #000;
padding: 10px;
min-height: 200px;
min-width: 500px;
position: absolute;

}

AJ-
  • 1,638
  • 1
  • 24
  • 49
  • since it's `ui`, have you tried using `uib-popover-template` instead? – Aleksey Solovey Feb 22 '18 at 10:39
  • ok that works! but there is a small issue, it opens the content in the external file, but it opens 2 popovers, one is the small one from popover, and next to it, it opens a square with the content of the external html file! How can I put my content INSIDE the popover window (the small one with the arrow-like top edge that you see in the picture?) added the picture in my original post – AJ- Feb 22 '18 at 11:01
  • can you show what that template looks like? could be some CSS issues – Aleksey Solovey Feb 22 '18 at 11:19
  • updated my first post with css and markup for external file – AJ- Feb 22 '18 at 11:27
  • `position: absolute;` breaks it – Aleksey Solovey Feb 22 '18 at 11:29
  • thank you, it was that, but I see that putting ` min-height: 200px; min-width: 500px;` also makes the template go outside the popover borders, is there a way to define a minimum size of the popover, and then if the content is bigger it will get bigger, that s ok, but even if the content is not much I would like to have a fixed minimum size! – AJ- Feb 22 '18 at 11:34
  • Here is a [Plunker](https://plnkr.co/edit/AOpyucm6SschebmkXt1k?p=preview) you can play with. You would need to adjust the [popup width as well](https://stackoverflow.com/questions/29005345/ui-bootstrap-popover-change-width) for it to match your template – Aleksey Solovey Feb 22 '18 at 11:35
  • slight typo, I think you need your `.popover` class to have **min**-width, which you can remove from `.testbox` class – Aleksey Solovey Feb 22 '18 at 11:40
  • 1
    thank you!! added this : `popover-class="popoverCustomSize"` and then made a custom class in css and the min-width and height work perfectly!! thank you again! if you post it in a new post I ll mark it as correct answer! have a wonderful day – AJ- Feb 22 '18 at 11:50

0 Answers0