2

I applied the below code to increase the width of quickAction lightning component

<aura:html tag="style">
    .slds-modal__container { 
        width : 60% !important; max-width : 80% !important; 
    } 
</aura:html>

But after summer 19 it is not working and not getting applied. Any changes has occured in Summer19.

  • That never should have worked to begin with. I'm not surprised it's not working now. – sfdcfox May 7 at 14:41
  • It was working correctly till yesterday. Today slds-modal_container not working – learningmode May 7 at 15:32
  • Yes, but you shouldn't be trying to override the standard UI. – sfdcfox May 7 at 15:34
  • 1
    One of the features intended by Lightning was to present a consistent user interface. Being able to override the LEX UI is antithetical to that design goal. You should not try to change the UI, but instead make your components reactive to use the available space. – sfdcfox May 7 at 15:37
  • 1
    Nope. You're asking the wrong question, really. You should be asking something like "how can I make my component fit in the available space?" Keep in mind that if you're trying to make your component wider, it won't fit on mobile devices, etc. You need a reactive design. – sfdcfox May 7 at 15:42
2

First, in Aura, we support styling using a component CSS file to ensure styles are scoped with .THIS and don't bleed and create problems with Salesforce and third-party components:

.THIS .slds-modal__container { 
  width : 60% !important; max-width : 80% !important; 
} 

Still, I have just checked with Summer '19 and this component named "styleTest" does generate a style tag as you would expect:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >     
  <h1>Aura Style Test</h1>
  <aura:html tag="style">
    .slds-modal__container { 
      width : 60% !important; max-width : 80% !important; 
    } 
  </aura:html>          
</aura:component>

This is the output once I add it to a page:

<div data-component-id="styleTest" data-aura-rendered-by="348:0" class="flexipageComponent" data-aura-class="flexipageComponent">
  <h1 data-aura-rendered-by="352:0">Aura Style Test</h1>
  <style data-aura-rendered-by="354:0">
    .slds-modal__container { 
      width : 60% !important; max-width : 80% !important; 
    } 
  </style>
</div>

Therefore the change is really at the CSS level, or with the quickAction components.

Overriding global SLDS using your trick is clever, but it will depend on load order, changes in SLDS, or changes in the quickAction components (a conversion from Aura to LWC for example might/will happen).

Like any remedial CSS, the best I can suggest is:

  • Short term: keep-up with the changes of each new release. Overriding SLDS of base components is not recommended, but you business needs might dictate so, and make it worth the investment.

  • Mid/long term: Contact Salesforce to see if your issue can be solved/supported by the platform. I doubt you're the only person with that specific need and there might already be an elegant way to solve this problem.

I will contact other key players and post additional comments as answers comes up.

  • What I'm hearing at this point is that overriding/skinning SLDS classes isn’t really an API. We can't make any guarantees there. However, we'd love to have an API: tokens? CSS variables? CSS ::part and ::theme? – JF Paradis May 7 at 19:11

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.