1

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: enter image description here

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...

3

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);
...
| improve this answer | |
  • Holy moly that does work. Good to know that I need to just actually drill down into the objects when they throw illegal invocation exceptions when dealing with lightning components. I didn't even bother because it looked like the method was failing. I shall keep that in mind. Thanks a ton! – Tyler Dahle Oct 15 '18 at 20:46

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.