3

I want to change height of a div element of my aura component as the browser windows height gets changed. I am enable to find any event associated with window.resize. How do i call a method when user resizes the browser window. Found a similar question but didn't understand it well.

How to run code when the browser window is resized in a Lightning Component?

| improve this question | |
  • Have you tri d using css media queries? Or add slds classes that will do that based on different screen sizes – glls Sep 5 '18 at 12:16
  • @glls No in my use case the height of the div element is calculated dynamically as per the available screen space, so media query is not an option. I need to calculate the space available and assign to the div. – Krishnan Mishra Sep 5 '18 at 12:29
4

You cannot execute a JS function directly in lightning. You can use another method to detect the window resizing effect. Try window.addEventListner

window.addEventListener('resize', $A.getCallback(function(){  }));

Use this code in your doInit controller method

doInit : function(component, event, helper) {
    window.addEventListener('resize', $A.getCallback(function(){
        if(component.isValid()) {
            console.log('Resizing Window');
        }
    }));
}

Let me know if it works for you.

| improve this answer | |

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.