0

I have a table where each cell holds a list of links. I've chosen to only show the first item of the list in the <td>, then I created a badge and put it next to the <td> item. Clicking on the badge generates a popover which contains the rest of the items from the list. Adding, top|right|left|bottom works fine, but sometimes the popover is cut off by the edge of the browser window depending on where the triggering element is located. I tried using auto right as a way to say, "Hey, if there's no room to open up on the right, then open up on the left", but the "auto" class always puts the popover on top of the item in the cell. I've tried adding data-container="body" to the trigger element but it doesn't appear to have any effect. Any ideas on how I can make the "auto" class behave correctly within a table cell?

Also, I'm not using jquery. I'm using jqlite provided by the Angular framework, assuming that that information is important to whomever is trying to answer this.

HTML:

<span ng-if="something.length > 0">
<span ng-if="something[0].link">
    <a>{{something[0].content}}</a>
    <span ng-if="something.length > 1">
        <a type="button"
           class="btn badge"
           title="Title"
           popover-template="somedirectory/someotherdirectory/somefile.tpl.html"
           data-container="body"
           popover-placement="auto right">
            +{{something.length - 1}}
        </a>
        <span ng-cloak></span>

    </span>
</span>

Lambda
  • 151
  • 1
  • 10
  • Since you're using AngularJS, you might consider using [Angular UI Bootstrap](angular-ui.github.io/bootstrap/). – cvrebert Jul 19 '14 at 01:17
  • I'm actually using the a forked version of Bootstrap since it offers the ability to pass an html template as the popover content. – Lambda Jul 19 '14 at 05:06

0 Answers0