Apex Code Development You need to sign in to do that
Don't have an account?
Raouf Ben Hassine lightning quick action modal width
Hello,
I am created an LWC quick action to be added to a record layout page. It is required to wrap the content of the modal in a lightning-quick-action-panel as per this dev guide Create Screen Quick Actions (https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_actions_screen).
I have got this working perfectly.
My question is about increasing horizontal space taken by the modal when it is open.
Modals aren't supported by styling hooks mechanisms, so I can't use them.
I tried overriding slds-modal__container without success unlike for aura components.
Can this be done?
Please use below code:-
Using external CSS File
To create a .css file,
follow the step:
1. Right-click on your lwc component.
2. Select New File
3. Name the file same as your lwc component with the .css extension
.slds-modal__container { max-width: 80rem !important; width: 80% !important; }if you need any assistanse, Please let me know!!Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh
That worked for me using the lightning-quick-action-panel in an lwc component
The approach above with only the lwc.css does not work for me either.
.slds-modal__container { min-width: 90vw; }
-----------------------------------
Inside LWC :
import { LightningElement ,track ,wire , api } from 'lwc';
import QuickActionFullScreen from '@salesforce/resourceUrl/QuickActionFullScreen';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
renderCallBack()
{
loadStyle(this, QuickActionFullScreen)); // this will make compoent bigger on load .
}
Hi Everyone,
Loading a css with an override for slds-modal__container works, but as you may know, it affects other components, including the standard salesforce components like the New Record. To change only one specific quick action component you can wrap the LWC with an Aura (too much work in my point of view) or you can achieve this using jQuery.
Steps:
1 - Download the latest version of minified jquery and load it to salesforce as a static resource
2 - Import it to your LWC
import { loadScript } from 'lightning/platformResourceLoader';
import jQuery363min from '@salesforce/resourceUrl/jQuery363min';
3 - Use the connectedCallback to load jQuery and manipulate the modal-container div style
connectedCallback() {
Promise.all([
loadScript(this, jQuery363min)
]).then(() => {
$('.modal-container.slds-modal__container').attr('style', 'width: 80% !important;max-width: 80% !important;');
}).catch(error => {
console.log('Error loading libraries: ' + JSON.stringify(error));
});
}
@herbert S Oliveira
I tried doing this to modify the style of one of my `Lightning-Quick-Action-Panel` but it does not work.
The rest of the post seems to be correct though -- you can use a static resource to override the slds-modal__container and although it is only invoked in a single LWC, it affects all components.
Hi @Sterling Wells,
It worked fine for me.
I recommend making sure the jquery js file was correctly loaded as a static resource.
Also, can you please confirm if the "Use Lightning Web Security for Lightning web components (GA) and Aura components (Beta)" option is enabled in your org? (Session Settings >> Lightning Web Security)
Regards