Very sorry for the low quality post, currently at a Salesforce event!

We have an issue with a lightning component modal defaulting to 50% width with the app.css file setting that..!

How can we overwrite the app.css file or update the modal container to be full width?

Yet again, hugely LQ post and no code references for me to share (which i normally despise) any indication would be brill

1 Answer 1


You would need to override the CSS class that is added to the modal's element, or an inline style that will push the width out further. The class that is dictating this width is most likely the slds-modal__container class.

Try adding the following to the component's CSS 'style' file:

.THIS .slds-modal__container {

Within the scope of this lightning component, all elements with this class will now have a 100% width. So, if you have a modal that opens from the modal, this may have unintended consequences.

  • 5
    Welcome to SFSE! I hope you enjoy your stay here and look forward to future contributions.
    – sfdcfox
    Jan 17, 2019 at 16:21
  • Exactly what I needed and expected to see. Straight out of the SLDS components too Much appreciated Jan 18, 2019 at 9:21

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.