Search code examples
angularjsangular-ui-gridpopover

AngularJS UI Grid and Popover alignment

Hi I'm adding a popover to UI grid in AngularJS. The idea is when the user mouse-over a row a popover will show up, and the popover contains a directive. I've successfully implemented this part, but now the problem is that part of the popover is blocked by the ui grid table, like this: sample sample

I want to bring the popover to the front, and I've tried setting z-index for both the ui grid table and the popover. Related code is here:

JS part:

function rowTemplate() {
    var template = [];
    ...
    template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>');
    return template.join(' ' );
}

HTML:

<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative">
</div>

<script type="text/ng-template" id="popover.html">
    <div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative">
        <directive-related part />
    </div>
</script>

But after I set the z-index it's still not working. How can I resolve this? Some of my references are here: popover: popover, z-index: z-index.

Thanks!

Solution

  • Note: I am making the assumption here that you are using ui-bootstrap.

    I have found that usually you need to use the append-to-body attribute with ui-grid custom formats.

    Try changing the template like so to add that attribute:

    template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')