When you use Visualforce page as Quick Action and modal popup window opens - it occupies 50% of container width. According to Create Object-Specific Quick Actions article

For a Custom Visualforce action, select the Visualforce page, and then specify the height of the action window. The width is fixed.

Is there a "best practice" way to adjust width in this case using some code?


The width is fixed. You're meant to create a responsive design that fits in the margins. No css or JavaScript you write can change this.

  • Thanks for confirming! Is the same formally possible when you use Lightning Component for Quick Action, not Visualforce page?
    – Victor
    Feb 15 '18 at 11:30
  • 1
    @Victor The width of a Quick Action is also fixed, so you should be using SLDS to create responsive layouts. Remember that a Quick Action will appear on phones, tablets, and the desktop, so you need to have a responsive UI design that will fit all three device profiles.
    – sfdcfox
    Feb 15 '18 at 15:38
  • Thank you, your answers and comments are very useful. I got it about responsive UI of content displayed in Quick Action modal. I'm just concerned about what I see here lightningdesignsystem.com/components/modals. There is written about large modals occupying 90% of width. Isn't it something we can use in Lightning Component to make Quick Action modal purposely occupying 90% of width? If no, I just wonder what are they talking about here?
    – Victor
    Feb 16 '18 at 14:02
  • 1
    @Victor It's something that they use for recordEdit, etc. The quick actions always use the smaller 50% version.
    – sfdcfox
    Feb 16 '18 at 14:24
  • Thanks. Adding related idea here, so people coming and reading this can vote and hopefully we'll see this feature available soon success.salesforce.com/ideaView?id=0873A000000E6ocQAC
    – Victor
    Feb 21 '18 at 9:21

I think you can achieve it by doing some CSS adjustments. Check the following blog which has an example with source code.

How to recreate modal component for force:lightningQuickActionWithoutHeader ( Showing quick action same as Lightning Experience Standard modal )

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.