1

I am quite confused by this behavior...

I have a component for a popover:

<div aura:id="popoverWrapper" style="{!'position: fixed; z-index: 10001; top: ' + v.offsetTop + 'px; left: ' + v.offsetLeft + 'px;'}">
    <section aura:id="popover" class="slds-popover slds-popover_walkthrough slds-popover_large slds-nubbin_top" role="dialog">
        <!--all my stuff for the component-->
    </section>
</div>

This component gets instantiated from another component, which is getting instantiated from another component that is a modal window (so a modal component is creating another component that is the modal's UI, and clicking a button in that UI creates the component I above).

So, since this is a popover, I need to position it. I get the element of the button that created the popover, so I have the position I need to set it to.

With position:fixed, it is supposed to be in the context of the viewport. The top offset is. If I give it top: 152px, it is 152px from the top of the viewport.

However, when I give it left: 732px, it is 732px from the PARENT ELEMENT, not the left of the viewport (which should be 0).

So the top offset is fine, but the left offset has it way off to the left because it is basing its left on the parent and not the viewport.

I am somewhat at a loss over what to do here. I can't understand why the top is based on viewport and the left is based on parent element... Anyone aware of how to overcome this and make it use the viewport only for its positioning?

1

I found out what was going on. So, even with the fixed position, the parent margins were still affecting the fixed element. Like the margins reduced the 'viewport' that the fixed element used. I wasn't aware that that was going to be an issue as I thought the fixed positioning would disregard parent entirely when positioning itself, but apparently not when the parent has margins.........

So, I went with a different solution. I used the offsetTop and offsetLeft parameters on the button element to get its position in relation to the parent instead of to the viewport with getBoundingClientRect. So I positioned my popup in relation to the parent and it works fine.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.