Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Timmy AhluwaliaTimmy Ahluwalia 

Set width of modal window of lightning action

Hi 
I am calling a datatable from the action button on the detail page, the pop window width is very less, i want to increase it to.
Please complete full procedure how can i fix this problem.
Thanks
Best Answer chosen by Timmy Ahluwalia
Alain CabonAlain Cabon
Hi, 

1) Create this static resource: popupCSS
  
.slds-modal__container{
    max-width: 70rem !important;
    width:80% !important;
}
2) Use this new static resource with <lng:require> at the beginning of your component
  
<aura:component controller="MyCrtrl"implements="force:lightningQuickAction,force:appHostable,force:hasRecordId,force:hasSObjectName">
   <ltng:require styles="{!$Resource.popupCSS}" />

All Answers

Alain CabonAlain Cabon
Hi, 

1) Create this static resource: popupCSS
  
.slds-modal__container{
    max-width: 70rem !important;
    width:80% !important;
}
2) Use this new static resource with <lng:require> at the beginning of your component
  
<aura:component controller="MyCrtrl"implements="force:lightningQuickAction,force:appHostable,force:hasRecordId,force:hasSObjectName">
   <ltng:require styles="{!$Resource.popupCSS}" />
This was selected as the best answer
Timmy AhluwaliaTimmy Ahluwalia
Hi Alain,
Thanks for the quick reply it worked.
I am new to the salesforce, where I can find documentaion on these topics if i need more information .
Thanks
 
Alain CabonAlain Cabon
Hi Harjinder,

You will not find documentation on these topics because you cannot change the default width (just the height) using the standard options of the quick action for a  Lighting component. It is impossible by default without this trick of CSS.

The tricks like this one with CSS are workarounds by reading the source code directly of the page with the developer tool of Chrome and the help of other developers in this forum or elsewhere.

Best regards
Alain
Jiong ZhangJiong Zhang
Hi Alain,

      I just set the width of modal window  based on the second option("2) Use this new static resource with ..."), but one problem is that the static resource affect the modal window's width of other actions. If you have any solution about this, please let me know, Thanks.


Best Regards,
Johnson