Set Modal Height

lightning-aura-componentsmodal

One of my buttons opens a modal with some content inside. My problem is that the content only shows on half the modal. It's been a long while since I've looked at this but I think this is the right code from the Aura component. Apparently it's looked like this for mnoths without someone telling us. I've been changing the height numbers but still it's cut off. What needs to be updated to fill the whole box?

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
<aura:html tag="style">
    .slds-modal__container{
    max-width: 80rem !important;
    width:60% !important;
    height ; auto;
    }
    .modal-body{
        height : 550px !important;
        max-height: 800px !important;
        }
</aura:html>
<c:contactRelationshipsContact recordId="{!v.recordId}" />  
</aura:component>

enter image description here

Edit:

If you remove the height/max-height lines it just displays the component size with the white space reduced:

enter image description here

Maybe my question should be how to I make the component height larger?

Best Answer

I got hit by that as well (I too was overriding the Modal Size). If you use this CSS it will fix it.

.slds-modal__content{
    height : 550px !important;
    max-height: 800px !important;
}

My understanding is they added a slds-modal__content size so you need to override that as well.

Related Topic