1

I am trying to apply custom css in Lightning Quick action component enter image description here

CSS

.THIS{

}
.THIS .closeIcon{
    display: none !important;
}
.THIS .slds-modal__content{
    margin: 0 auto ;
    width: 98% !important;
    max-width: initial ;
    min-width: initial ;
}

Component

<aura:component  implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" >
       <div class="demo-only" style="height: 640px;">
              <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
        </div>
        </section>
       <div class="slds-backdrop slds-backdrop_open"></div>
   </div>
</aura:component>

2 Answers 2

2

You can't affect CSS outside of your component. There's no way to affect the appearance of the quick action except to choose if there's a default header or not.

2

You can use <aura:html tag="style">.

In you case:

<aura:component  implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" >
    <div class="demo-only" style="height: 640px;">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
            </div>
         </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
    <aura:html tag="style">
        .modal-body{ 
            height : auto !important; 
            max-height: 1000px !important;
        }
    </aura:html>
 </aura:component> 
1
  • I had an issue as well where this worked for me. In my other Lightning components the css loads fine, but I think it has to do with the order in which my static resource javascript is loading. Feb 22, 2022 at 15:25

You must log in to answer this question.

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