7

I am trying to implement a popover in Salesforce LWC. I am able to get it work but only issue is the popover is not actually coming above the body like a modal. You can see the sample here. As you see when a radio button is clicked I want to show a help popover but without taking height of the entire row/div. Is this something possible? Appreciate any inputs !! Thanks!

1 Answer 1

10

You can check Playground

enter image description here

You need to use position relative for parent and position absolute for child so that the child is placed in view-port according to position of parent. You should also use any 2 properties from left,top,right,bottom on child to position it correctly. Below is what you can do:

Make the parent relative using slds-is-relative:

<div class="slds-is-relative slds-col slds-size_5-of-12 slds-float_right ">
    <section if:true={opt.checked} class="slds-popover slds-nubbin_left" role="dialog">
        <div class="slds-popover__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </section>
</div>

Then, adjust the position of child element through css:

.slds-popover.slds-nubbin_left{
    position: absolute;
    left:0rem;
    top:-1.3rem;
}
1
  • Thanks!!!!!!!!! :)
    – malu
    Aug 21, 2019 at 18:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .