Search code examples
angularjsangular-ui-bootstrapbootstrap-popover

popover-append-to-body doesn't work


I have this kind of problem: I prepared a popover in AngularJS, triggered by button positioned in a row (ng-repeat) inside a table. It works, but when I resize the window, vertically I don't have problems, instead horizontally if I scroll left or right the popover doesn't follow the button that trigger it.

The code is

        <table ng-table="fondiTable" class="table table-condensed table-bordered table-striped" show-filter="isFiltersVisible">
            <tr ng-repeat="fondo in data">
                <td class="i9font text-center" data-title="'Rapporto'" header-class="'i9header'" filter="{rapporto: 'text'}" sortable="'rapporto'">{{::fondo | formatRapporto}}</td>
                <td class="i9font text-center" data-title="'Cdg'" header-class="'i9header'" filter="{cdg: 'text'}" sortable="'cdg'">{{::fondo.cdg | formatCdg}}</td>
                <td class="i9font text-center" data-title="'Log'" header-class="'i9header'">
                    <button type="button" class="btn btn-default btn-xs" 
                        uib-popover-template="'myPopoverTemplate'" popover-placement="bottom-right" popover-trigger="'outsideClick'" popover-append-to-body="true">
                            <span class="glyphicon glyphicon-info-sign"></span>
                    </button>                               
                </td>
            </tr>
        </table>

I read in different issues that the directive "popover-append-to-body = 'true' " could be my solution... but I didn't find the right way to use it. Can someone help me?

Thank you in advance


Solution

  • I think they are going to fix this issue on the next bootstrap's version (V4)

    https://github.com/twbs/bootstrap/issues/12799