I have a component with 3 subcomponents. Only one component is visible at a time. The component simply progresses from one screen to the next. One of the screens is longer than the others. I'd like the size of the container to be different when that component is visible.

When I use the browser tools I can dynamically change the height of the container. But the same code doesn't work when it's part of an Aura component.

    height: 1000px;
    max-height: 100% !important;
    overflow: hidden;
    position: relative;
    top: 0%;

This is in a static resource.

let elements = document.getElementsByClassName("slds-modal__container"); 
elements[0].style.height = "500px"; 

This works to change both the height attribute and the actual size of the visible component when called from the browser console.

let elements = document.getElelmentsByClass("slds-modal__container");

This doesn't work when called at runtime.


1 Answer 1

<aura:html tag="style">
    .slds-modal__container { 
        height: {!v.height}
    } </aura:html>

This worked. The height can then be changed dynamically using the height attribute.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .