0

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

Improve this question

1 Answer 1

Reset to default
4

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 {
    width:100%;
}

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.

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

You must log in to answer this question.

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