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.

10
  • That never should have worked to begin with. I'm not surprised it's not working now.
    – sfdcfox
    May 7 '19 at 14:41
  • It was working correctly till yesterday. Today slds-modal_container not working May 7 '19 at 15:32
  • Yes, but you shouldn't be trying to override the standard UI.
    – sfdcfox
    May 7 '19 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 '19 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 '19 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.

1
  • 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 '19 at 19:11
0

Personally, I use this method to override the standard enhanced related list (the font size is just way to big on it in general, and generally defeats the purpose of having more then 4 columns) I realize it's not supported and far from best practice but I don't see another way to do it without building my own enhanced related list component which would be madness. Worst case. SFDC changes class names.. drops the hammer and it falls back to bigger font sizes..

    <aura:html tag="style">
        <!--
        The desired effect here is to override the Standard LDS Enhanced Related list as its font size is way to big.
        (Inventory Request Line Items) This really isn't best practice at all and is not supported but is a
        necessary evil.
        -->
    .forceRelatedListPreviewAdvancedGrid .uiVirtualDataTable { font-size: .80rem; }
</aura:html>
0

From my knowledge in-component styles for aura are disabled when Locker Service is enabled, so it stopped working when Locker Service was enabled

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.