Screen Flow in Salesforce is a powerful automation tool that enables users to create dynamic experiences with its intuitive drag-and-drop interface. Users can easily build screens using standard components, with the option to employ custom ones for specific use cases. While screen flow offers endless possibilities, as an automation tool, it prioritizes functionality over visually appealing screens. It is possible to employ CSS in order to enhance the UI of screen flows.
What is CSS?
Cascading Style Sheets (CSS) is a fundamental web technology that defines the presentation and layout of HTML documents. It allows developers to control the appearance of web pages by styling elements such as fonts, colors, and spacing.
Although it is not a standard option, it is possible to use custom solutions to control the CSS of screen flows.
In this post, you can find a custom component that lets you control the CSS of screen flows.
How to Use the Component
1- Install the component using the installation links below.
2- Add the "Style Overwrite" component to your screen element.
3- This component has only one input parameter: CSS String.
You have to enter a CSS to this parameter. It is possible to enter the CSS or use a text template. For instance, here is the Style Overwrite component with a text template called {!CSS}.
Here is the {!CSS} text template used in the component. It adds a background image to the flow screen.
This specific CSS code will apply a background image only to screen flows opened from a quick action - in a modal.
Here is the final result using this CSS code.
What can you do using CSS?
There are endless things that you can achieve using CSS. For instance, you can change the size of the screen, remove the close button (X), change the size/color of the fields, etc.
On the other hand, it is possible to use this component on Lightning pages as well. For instance, here is a case record page. This component makes the priority field bold, colorful, and bigger.
Here is the CSS used for this. You can replace the object name and field name in order to use it with other objects/fields.
div[data-target-selection-name="sfdc:RecordField.Case.Priority"] .slds-form-element__label {
font-weight: bold;
color: red;
font-size: 14px;
}Considerations
This component has access to the CSS styling of the entire page. So, when used on a screen flow, If there are multiple screen flows on the page, it uniformly applies the CSS. However, when launching a screen flow via an action (and the screen flow opens in a modal), the CSS is exclusive to that particular flow. It is because the screen flow opens in a modal and only one screen flow can be opened at a time.
If you want to apply the CSS only for modal, you have to add a specific text to the CSS. Make sure that you add .uiModal to the beginning. You can see examples below (for instance, background image CSS code).
This component may require CSS knowledge. However, you can utilize the sample CSS codes provided in this post. Additionally, tools like ChatGPT can generate new ones for your specific use case.
Sample CSS Codes for Screen Flow
Increase the Modal Height
.uiModal flowruntime-flow {
max-height: 100% !important;
}Set the Modal Width
.uiModal--medium .modal-container {
max-width: 400px !important;
}Hide the Close Button
button.slds-modal__close.closeIcon {
display: none;
}Increase the Text Area Fields' Height
textarea {
min-height: 300px !important;
}Change the Color of Text Area Fields
textarea {
color: green !important;
font-weight: 800;
min-height: 200px !important;
}Change the Navigation Bar's Color
.uiModal flowruntime-navigation-bar {
background-color: lightblue !important;
border-width: 0 !important;
}Add a Background Image
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}Remove the Borders of the Flow
article.flowRuntimeForFlexipage {
border: none;
}Change the Height of a Data Table
flowruntime-datatable .restrict-scroll {
max-height: 200px !important;
}Change the Color of Field Labels
.slds-form-element__label {
color: red !important;
}Display Radio Button Choices Horizontally
.slds-form-element__control .slds-radio {
display: inline !important;
}As mentioned above, if you want to apply the CSS to screen flows on the Lightning page, you can remove .uiModal from these CSS codes.
It is possible to apply multiple CSS codes at once. For instance, here is a flow screen with a background image and a grey navigation bar.
Here is the text template used for the CSS of this screen.
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}You can even use gif as a background image. For instance, here is a screen flow that creates a contact record from account.
Changing the CSS of the Repeater Component
In the Spring '24 release, Salesforce introduced the Repeater (Beta) screen component which allows users to repeat a set of fields in a single screen element. Although it is already a game changer, there is currently no option to customize its appearance.
In this example, as you can see, all the fields appear in one row, just like a new row in a table. Moreover, notice the remove button is replaced with an icon.
flowruntime-repeater-instance .slds-card.card-container {
display: flex;
gap: 10px;
align-items: center;
}
flowruntime-repeater-instance div div.flowruntime-input {
display: block;
}
flowruntime-repeater-instance div flowruntime-screen-field {
width: 100%;
}
flowruntime-repeater-instance div flowruntime-flow-screen-input {
width: 100%;
}
flowruntime-repeater lightning-button button[title="Remove"] {
font-size: 0px !important;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwbpoNpITAwQBMApXNh0jDzbBhCNB2TAfbObDZ8l8cCA&s") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
fieldset>flowruntime-screen-field {
flex-basis: 100%;
}
fieldset>div:has(button[title="Remove"]) {
margin-top: 0.95rem;
}
fieldset>flowruntime-screen-field:not(:has(.slds-checkbox__label)),
fieldset>div:has(button[title="Remove"]) {
align-self: start;
}You can also make the Repeater component show in 2 columns.
/* Repeater2ColsCSS */
flowruntime-repeater lightning-button:has(button[title="Add"]) {
grid-column: span 2;
width: fit-content;
}
flowruntime-repeater {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}If you are wondering if this component works with SLDS 2, the answer is yes! In some cases, results look even better.
Installation Links
Use this link to install in production or developer edition environments.
Use this link to install in sandbox environments.
Hello,
Thanks for this. Any idea what should do if the CCS is not working? I installed the package, added it to my screen flow, created the text template variable and I cannot see the background.
Any help will be appreciated.
How are you launching the flow? Are you using a quick action (so that it opens in modal)?
Can you send me the CSS code that you are using?
Hi Yumi.
I removed the modal code because I don´t launch the flow using quick action. I have this flow in an experience site, but still, the background is not showing.
This is the code:
flowruntime-flow {
background-image: url("https://kalazanature-dev-ed.develop.file.force.com/servlet/servlet.FileDownload?file=015Hu000004yZxC") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Hi,
I think your experience site might be blocking this image.
Thanks! You´re right was the experience site blocking the image.
Hi Yumi, how can I change the color of choices in a picklist? I'll attach my code...I'm booting non modal. Thank you 🙂
flowruntime-flow {
background-color: #ffefe1 !important;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.slds-form-element_label {
font-weight: bold !important;
}
.slds-form-element__label {
color: red !important;
}
Hi,
Can you try this?
.slds-select {
background-color: blue !important;
}
Hi Yumi,
I'm experiencing the same problem. I can launch the screen flow from an object or in a list view through an action. I've followed along and use the code in this post. However, when launching the flow, the code doesn't show.
Can you send me the CSS that you used?
Hi Yumi,
I've used this code:
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
How are you launching the flow? Is it from an action?
Since there is .uiModal in the CSS code, it applies to modal only.
I'm launching it from an action on the record page.
Can you check your text template (for CSS) in plain text mode? Make sure that there are no extra HTML tags like
Thanks Yumi! that was it, there were some tags in there.
Great!
Hi Yumi,
Same issue here, no tags, but CSS not working:
Here is my code
textarea {
min-height: 300px !important;
}
textarea {
color: blue !important;
font-weight: 800;
min-height: 200px !important;
}
Very Creative!
How would I make this work for a screen flow that is displayed directly on a record detail page of an experience cloud site? There is no action to call the flow.
You can use the same CSS code but without .uiModal
Hello Yumi, thanks for sharing this is really helpful! However, it worked for me without modal option. But when I am trying the same with modal it did not.
Code:
uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Hi,
Please make sure that there is a dot before uiModal
So it should be like this: .uiModal and not uiModal
Thanks for sharing this, Yumi. This is a very valuable tip.
It worked for me after making sure that the text template (for CSS) is in plain text mode (Rich Text by default). And also stating the obvious, the new version of the flow needs to be activated.
That's great! I am happy that it worked.
Hi Yumi - should this work for a flow that is automatically launched when a page is open? I am testing this in a community
What is the code for non-modal? Should the following work?
.flowruntime-flow {
background-color: yellow;
}
Hi,
You can use this:
flowruntime-flow {
background-color: yellow !important;
}
Hi Yumi,
thx it works pefect. Can i also change the color of the Text Field Label?
Hi Amin,
Please try this.
.slds-form-element__label {
color: red !important;
}
Hi Yumi, very interesting and good functionality. In my Case i embeding a Screenflow in a Website, within the Screenflow in Debug or on a Record the styling will be displayed, but within the Website, the Screenflow doesn´t have any Styling. Any idea why or a solution to fix that?
BR Nico
Hi,
Is it a public website? Can you send me a link so that I can see what's happening?
Hello! How would you change the font size of a text component in your screen flow? How about the picklist component? For example, I have a picklist component on my screen flow with the label "How can we help you?". Thank you!
Hi Holly,
Can you try this?
.slds-form-element__label {
font-size: 18px !important;
}
You can use this one for the label colors:
.slds-form-element__label {
color: red !important;
}
Hi Yumi,
Thanks so much for your reply. I missed a spec in my first comment, sorry about that.
What I meant to ask was how to adjust the font size of the text that is input into the text element. Does that make sense?
This is such a helpful component, thank you for creating it!
Hi Yumi, this is so helpful, thanks! Have you tested updating CSS for the new repeater element and fields within the element? I tried this, but it's not working:
CaseRepeater {
background-color: #ffefe1 !important;
}
Description {
min-height: 300px !important;
}
Hi,
Yes, for example this code makes the labels red and changes the background color.
.uiModal flowruntime-flow {
background-color: #ffefe1 !important;
}
.slds-form-element__label {
color: red !important;
}
Hi Yumi,
Thank you very much for your sharing.
Can we hide the finish button also?
You can of course set the screen to "Hide Next or Finish" under Configure Footer.
But, if you want it to hide based on a dynamic condition, you can use this CSS for example:
lightning-button.flow-button__FINISH {
display: none;
}
Thank you Joshua.
I am trying to hide the "Finish" button from the last screen so I can't use the "Hide Next or Finish."
I tried the CSS you provided, and it's not working.
The "Finish" button is still there.
Hey Shlomi,
You shouldn't need a CSS overwrite for this use-case.
Just uncheck the Show Footer checkbox in the footer settings for the last screen
You can't uncheck the show footer checkbox from the last screen.
If you mark it you can't save the flow.
You might get a warning but you can safely ignore it.
To save, fix 1 error.
Submission_Screen (Screen) - You can set either allowFinish or allowBack to false, but not both.
You just need to make sure either the next or the previous button are set to "Use the standard label",
Then you will be able to hide the footer all together.
I'm having issues with this in our sandbox environment.
Our Screen flow gets embedded in our Experience Cloud site, so it is not triggered from an action button.
Screen flow has some display text at the top followed by 5 text input fields.
Created a text template with one of your samples. Named it StyleOverwriteText and switched it from viewing as rich text to viewing as plain text.
textarea {
color: green !important;
font-weight: 800;
min-height: 200px !important;
}
Added the Style Overwrite component to my screen. Put in CSS String of {!StyleOverwriteText}.
Debug of the flow doesn't reflect any formatting changes.
Execution of screen flow from Experience Cloud site doesn't reflect any formatting changes.
Not sure what I am doing wrong.
Hey Karla,
It sounds like you are using the wrong CSS selector for text input fields.
Since you are using text input fields, replace the "textarea" selector with "input"
The result should look like this:
input {
color: green !important;
font-weight: 800;
min-height: 200px !important;
}
You'll probably want to remove the min-height line for regular input fields.
hi in marketingcloud dashboard screen flow was triggered and displayed the screen but the screen height was too high we are unable to see the navigation buttons also can we reduce the size of the screen
Hi,
I'm unable to get the gif to render. I uploaded the GIF to a file sharing site (Imgur) and used the direct link. Nothing displays. Here is the CSS I am using:
.uiModal flowruntime-flow {
background-image: url("https://i.imgur.com/5hTUj2S") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Is this URL still valid? It opens a video.
I can't get the gif to work. Could you please post the CSS for that?
Can you please send the CSS that you are using?
This is great. I made my flow look amazing with styling after I used the Inspect feature to drill into the specific references needed.
Do you know what added CSS may be necessary for the flow to appear with all the styling on a page in Experience Cloud? I worked through my styling in debug mod. But once I placed the flow on an experience page, the styling did not format as it did in debug mode.
The outer wrapper in Experience Cloud might be different.
I would try manually applying the CSS in the browser dev tools and see if it works
Hi Yumi - how would you change the background color of a Datatable? I tried the following with no luck:
flowruntime-datatable {
background-color:#f7f7ef;
}
Hi Dan,
Do you need it only for the data table or for the entire screen's background (screen element)?
Hi Yumi- I need it for the entire screen background. Thanks!
How do I get both the label and input to be RTL and ligned to the right?
Hey Jeff,
You can try:
direction: rtl and text-align: right;
Hi,
I am trying to fire the screenflow from a quick action inside the record.
All the CSS codes work except the one which we can use to increase the width of the modal screen;
I used this code:
.uiModal--medium .modal-container {
max-width: 400px !important;
}
I tried increasing and reducing the max-width from 100px to 2000 pixels but noting is happening.
Can you provide some suggestions to make that work?
Hey,
I just tried it with no problem
Try this CSS:
.uiModal--medium .modal-container {
max-width: 1400px !important;
}
Seems like after a certain width value, it is not increasing the width even if you increase the pixel value.
Did you encountered that?
I also meet the same issue. Have you had solution for that?
Hi Joshua, excellent component! I'm running into an issue where I want to change the color of the Finish button, how would I go about doing so?
Hi Yumi,
This is an awesome tool. Thanks
How can we change the colour of the Header?
I will need the header of my screen window to have the same colour as the Navigation Bar.
Can we achieve this?
Yes, you can use something like this.
.slds-modal__header {
background-color: lightblue !important;
}
Hello, Thank your for this contribution.
I'm having a bit of a problem. I was able to make it work using:
.uiModal--medium .modal-container {
max-width: 100% !important;
}
From a quick action, and it worked fine but after a while, it stops working. It's a screen flow. So we can use it a few times and its fine, and then suddenly it goes back to the old size.
Any insights?
Hi there,
This is really helpful! Increasing the width for the screenflow worked like charm!
The only thing I don't get to work is showing the radio buttons in flow horizontally using this (also made sure using plain text when using text template):
.slds-form-element__control .slds-radio {
display: inline !important;
}
Anyone else, that got this to work?
Your help is really appreciated!
Same code worked for me. Did you find a solution for this?
Hey,
Thanks for the reply!
Managed to figure it out.
As the radio buttons was multiselect it needed to be marked as checkbox group (instead of radio) in the CSS.
Now it works!
Cheers!
Hi Yumi,
i need to change the background image for a flow that we use in a Community Site.
I used this code:
flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
but doesn't show the change.
Can you help me?
Thank you
Hi Gabriel,
I think it can be that your community site is blocking the image.
Can you add https://salesforcetime.com as a trusted site in your community? You can do it from Security & Privacy section of the Community Builder Settings.
Awesome tool! Finding a lot of use cases for it.
Hi, I have copied the example of the repeater in line format, when placing the flow on a exp site, it is not showing the format change.
You might need to tweak the CSS for it to work in Experience Cloud as the wrapper components are sometimes different.
Can you change styling around components used in the screen flow? For example I have a screen flow with some text fields and a map component. I would like to reduce the margins of the map component.
You should be able to achieve that with CSS
I've followed the steps but from quick action the css code is not working.
Code use:
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Hi, I've the same code but when I tried my screen with action button from a record it's not showing.
Code used:
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Can you make sure that your text template is in plain text mode?
I confirmed text template is in plain text mode. Is there something that I'm missing?
Hi Yumi,
I am using this on a lightning page and trying to change the label colour on a picklist field.
When I use the following code, it will change the label colour on all other fields, but not picklists:
---
div[data-target-selection-name="sfdc:RecordField.Opportunity.Goals_of_Loan__c"] .slds-form-element__label {
font-weight: bold;
color: red;
font-size: 14px;
}
---
Is there a different label name to use for picklists?
Thanks so much
Hi Melissa,
I checked now but it worked for me. Can you try without the line breaks, like this:
div[data-target-selection-name="sfdc:RecordField.Opportunity.Goals_of_Loan__c"] .slds-form-element__label { font-weight: bold; color: red; font-size: 14px; }
Hi Yumi,
That worked! Thanks so much!
Another question for you - is it at all possible to change the colour of the VALUE in a field? text, date and picklist?
I would also like to know the answer to this question ????
Hi Yumi!
This is a great component! I tried do use it with the "Detect and Launch" Component from UnofficialSF. Unfortunately, changing the modal CSS does not work with this in combination. Do I need to rewrite the code a bit?
.uiModal flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
.slds-modal__header {
margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
background-color: grey !important;
border-width: 0 !important;
}
Hi,
I have seen updates from Salesforce about architecture changes on experience sites, particularly with CSS overrides, see article for detail: https://help.salesforce.com/s/articleView?id=001622574&type=1&utm_source=techcomms&utm_medium=email&utm_campaign=FY25_Core
I am using this package to style a screen flow on an experience site, do you think this will effect the effectiveness of the package and screen flow styling?
Can you tell me how to move footer button to center
Hi,
I usually use Flow Button Bar for this.
https://unofficialsf.com/flow-button-bar-new-and-improved/
I try to make the flow launch screen wider by using:
.uiModal--medium .modal-container {
max-width: 1400px !important;
}
I am launching the screen flow from quick action. The default flow launch is too small as I need to display a table.
However it doesn't work. Any thoughts?
Can we target a specific field to be replaced by another value in the screen?
My usecase is to override the "Street Name" from the address component to some other name.
Is it possible to move the Previous button to the left? so that it stays in the same place as the pause button?
This is so cool and powerful. Thanks for sharing. I understand CSS basics and I can follow what the examples are doing okay, but where are you guys finding the names of elements and classes to select? Things like flowruntime-repeater, flowruntime-flow, slds-form-element__label and so forth. Knowing the names is the hardest part for me. Is there a good reference somewhere?
Hi Yumi,
This solution is amazing and works perfectly!!!
Is it possible to change the Color of only some Field Labels? I have a background image that have a combination of dark and clear areas, and want to manipulate the color of the field labels accordingly.
Do you want to change the color of all the field labels or just a few of them?
Hi Yumi,
Thanks for that, man! I would say that this sped up my change a little bit. Thank you so much.
Did you perform any CSS flow changes to be embedded directly in the app page? I mean, I've created a flow that we would like to use directly in the record app page. The flow has some padding and margins, and then it starts the content. I would like the content to start at the beginning of the flow space. Do you know if this is possible?
Hi Yumi and Joshua, what an incredible article. Thank you so much for sharing, and also taking the time to answer all the questions.
I have a question myself as I'm attempting to use the CSS code for the repeater. I've pasted the code exactly as written, no extra HTML tags (hehe). However the the fields are very spread out. Also my second field moves depending on what value I have selected in the first field. I was wondering if there is a way that I can set the width of the field size so they stay static, or is there a different method you would recommend?
One other thing to note is I have only two component (1 picklist, 1 lookup) and the remove X button in the row.
While using below:
flowruntime-flow {
background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
background-repeat: no-repeat !important;
background-position: center;
background-size: cover;
}
is overlapping all the other Screen Flow's background property.
how this can be fixed? @Yumi Ibrahimzade
How are you launching the flow? As a modal? If not, right, it applies the CSS to all the screen flows on the same screen.
Hi - great component, however any time I add this is a single screen in a single flow, it applies it to every single screen flow in the Org. How do I stop this?
Hi Yumi,
Thank you for the great CSS component.
The CSS for the Repeater Component has stopped working in the Winter '25 sandbox.
Do you have a solution?
Hi, I updated the CSS, can you please try with the new one?
Hii Yumi Ibrahimzade and everyone,
does anyone know, i need to alin the Action BUtton in screen flow to center of the screen, cancel button should display in center of the screen and also i need to pass that action button name as flow action or parameter/variable to my another flow , if anyone knows please acknowledge me.
Hi
Setup and working fine in sandbox in debug and experience cloud
When I installed in production, it works in debug but does not do anything in the experience cloud site.
What am I missing?
Can you the Code for the Style Overwrite Component?
Hey! How are you? I am trying to use your component in a flow that it's being launched in an experience site with a quick action. I want to make the modal width of the quick action bigger.
The flow has a screen component with another LWC inside.
The CSS I am using is:
.slds-modal__container {
width: 90% !important;
max-width: 95% !important;
min-width: 95% !important;
}
In the community is not working but with my admin user it's working.
Thanks for the component.
One question: is there a way I can exclude a field from being changed by the CSS?
I'm using this on a screen flow with input fields and don't want the style to apply to the long text fields.
Hi Yumi,
May I get to know about how the LWC is implemented and how it work in realtime?
Hi Joshua and Yumi.
Wondering what are thoughts about the applying this component to the business problem that the users just close the flow with X in teh middle of teh process. So "remove X from screen flow" will allow the Finish button to control everything: starting from the Confirmation messages to the Rollback actions.
CSS that worked for me:
.slds-modal__close {
visibility: hidden;
}
Hi Joshua and Yumi.
Wondering what are thoughts about the applying this component to the business problem that the users just close the flow with X in teh middle of teh process. So "remove X from screen flow" will allow the Finish button to control everything: starting from the Confirmation messages to the Rollback actions.
CSS that worked for me:
.slds-modal__close {
visibility: hidden;
}
Thanks for this
unlucky it wont work with flow iframe , would make my screen flows look amazing
Hey,
I am trying to fire the screenflow from a quick action inside the record.
But it seems that the code used to increase the width of the modal screen is not working;
I used this code:
.uiModal--medium .modal-container {
max-width: 400px !important;
}
I tried increasing and reducing the max-width from 100px to 2000 pixels but noting is happening.
Can you provide some suggestions to make that work?
Hi Tal,
Try this and let me know if it's working. Also, please make sure that your text template is in plain text mode.
.uiModal--medium .modal-container {
max-width: 80% !important;
}
Hi Yumi,
I could not install the package. Error displayed was related to fact that org is using contacts related to multiple accounts feature. Any idea how mitigate? Kind regards.