getBoundingClientRect() does not work in lightning component?

Question

Every example I am seeing about positioning a tooltip manually involves getting client boundaries, which you would get through getBoundingClientRect() on the element.

I have a lightning component with this div in it:

<div aura:id="testDiv">blahblahblahblahblah</div>

That is wrapped in nothing but the <aura:component>.

So in my controller I do:

component.find('testDiv').getElement().getBoundingClientRect(); and get:

So then I found information on possibly having to set functions back in the context of window, so tried doing various things like this:

var testElement = component.find('testDiv').getElement();

    /*var elementBoundaries = {
        boundingRect: testElement.getBoundingClientRect.bind(window)
    };

and calling elementBoundaries.boundingRect, but get a 'cannot read property 'apply' of undefined error.

I am looking at an example that is doing this:

var popoverEl = component.find('popover').getElement();
    var popoverBoundingBox = popoverEl.getBoundingClientRect();
    var popoverWidth = Math.ceil(popoverBoundingBox.width);
    var popoverHeight = popoverBoundingBox.height;

So why is it that I am entirely unable to use getBoundingClientRect???? Trying to get the dang coordinates for this element is honestly getting ridiculous. I am out of ideas and options...

Answer 1

You're possibly overthinking it. Debugging from a FilteringProxyHandler will result in the illegal invocation error you're seeing, but simply accessing the parameters normally shouldn't cause an error:

var rect = component.find("testDiv").getElement().getBoundingClientRect();
console.log(rect.top);
console.log(rect.left);
...