2

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?

1

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;
    }
}
  • 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 '17 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 '17 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 '17 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 '17 at 5:40

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.