I'm creating a lwc datatable with a custom column which contains a button and a corresponding popover.

The problem is that the popover will not display as I would like it to, though by playing around with different position styles I was able to get fairly close.

I set the container of the entire table cell to position:relative so that the button is positioned properly within the column, but the issue is when I try to determine the position value for the popover itself.

When I set it to position:fixed, the popover displays properly initially, but as I scroll through the page, as fixed sets the position relative to the viewport, the popover position doesn't change with the table but stays at the same position relative to the window. (SCREENSHOT A) When I set the popover to position:absolute or position:relative, the popover will not will not display over the other rows (SCREENSHOT B) or it will display but expand the entire row, respectively. (SCREENSHOT C)

I would like to have the popover display over the rest of the table, as it does it position:fixed, but be positioned relative to the parent table, as with position:absolute or position:relative.

Here is the code for reference:



<div style="text-align:left;" class="anchor slds-show">

    <!-- button -->
    <div class="slds-float_top" style="text-align:center;">
            onclick={openPop}    //these functions add/remove the slds-hide and slds-show classes from the popover
    <!-- end button -->

    <!-- popover -->
    <div class="slds-float_left popContainer slds-hide">
        <section class="slds-popover slds-nubbin_top-left slds-float_left slds-popover_large" role="dialog">
            //my code here
    <!-- end popover -->


:host .anchor {
    position: relative;
    display: block;
:host .slds-popover {
    position: fixed;

Here are some screenshots of the scenarios described:

SCENARIO A enter image description here

SCENARIO B enter image description here

SCENARIO C enter image description here

Am I going about this problem the right way? Please let me know if you need any clarification. Thanks!

  • Hi, I am struggling with very similiar issue, did you make any progress? – patryk Jan 10 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.