I have a very simple thing here:

<div class="slds-truncate">
        <a id="popoverToggle" href="javascript:void(0);" data-value="{!v.recordId}" onclick="{!c.togglePopover}" style="position: relative;">

This gets rendered. Then the togglePopover function needs the clientHeight and clientWidth of popoverToggle.

However, these are always 0 in my togglePopover function.

I have tried:

component.find('togglePopover').getElement(); //With an aura:id instead of id document.getElementById('togglePopover');

Both of the above gave me the element, but always had 0s in the clientHeight, clientWidth, etc... properties.

I also tried doing a getBoundingClientRec() on the element using both of the above methods to get the element, and just get:

Exception: TypeError: Illegal invocation at DOMRect.remoteFunction

What I am trying to do is get the position of the element in the window, so I can then determine where my popover needs to be position. But so far, I cannot get these values at all. From googling around, all I see is 'you can just get those values', but I apparently cannot and cannot figure out why.

The popoverToggle is an element in a lightning component that is inside another lightning component, not sure if that makes any difference.

Main question: How do I get this clientHeight/width information? Or how can I determine the location of the element on the page to properly position a popover?


You must log in to answer this question.