3

I have a lightning action and a component associated with it. When i click on the action, the modal pops up with a Normal size.

I want to customize the width of the Modal. I searched some css stuff and understood that the width can be altered by changing the @Media css property.

.slds-modal__container class is not present in the component markup. It automatically takes the Lightning action Modal default size.

Default Modal value : 

@media (min-width: 48em)
.slds-modal__container {
    margin: 0 auto;
    width: 50%;
    max-width: 40rem;
    min-width: 20rem;
}

I want to update the @media's min-width to 60em like this, 

@media (min-width: 60em)
.THIS .slds-modal__container{
    margin: 0 auto;
    width: 75%;
    max-width: 40rem;
    min-width: 20rem;
}

But while doing this , I'm getting an CSS parser error:

Issue(s) found by CSS Parser (0Ad0k0000000HM2): Unable to parse the remaining content in the media query '.slds-modal__container': at line 2, column 1 near '(min-width: 70em) ».slds-modal__container' : Source

Is there any workaround / solution for this?

Improve this question

1 Answer 1

Reset to default
2

You need to enclose the elements that are affected by the media query in curly braces:

@media (min-width: 60em) {
    .THIS .slds-modal__container{
        margin: 0 auto;
        width: 75%;
        max-width: 40rem;
        min-width: 20rem;
    }
}
Improve this answer
4
  • Now the error is gone, but the applied width is not reflecting for my Modal. In actions, Only height is given, how do i alter the width. I tried the above way, but the width is not changing. I tried this again Width is not changing
    – AjaySFDC
    Sep 12, 2017 at 20:48
  • @AjaySFDC You can't affect anything outside of your component. You must design your component to fit within the width of the UI.
    – sfdcfox
    Sep 12, 2017 at 20:57
  • So, the lightning action will always modify only height and we cannot modify its width whatsoever ? Is there any workaround to modify its width ?
    – AjaySFDC
    Sep 13, 2017 at 5:31
  • @AjaySFDC Not in an Action. It will always have a specific width depending on the device being used. Take a look at some of the examples in the docs, like this one, for how you should design your components.
    – sfdcfox
    Sep 13, 2017 at 5:40

You must log in to answer this question.

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