How to Align Flow Radio & Checkboxes Horizontally
Flow can be difficult to style. It requires you embed the Flow into a visualforce page.
Then you need to know what CSS styles to modify. Salesforce provides some help documents on this, but it’s not complete.
What do you do if you want to move your radio or multi-select checkboxes from the default vertical:
to a pretty horizontal alignment?
First we need to find out the HTML of the flow. I created my flow, for this test just a single screen element. Then I embedded it into a visualforce page. All I needed to do was the following:
<div id=”theflow”>
<flow:interview name=”Screen_element_test”/>
</div>
I choose to remove the header and sidebar to make finding the HTML and Classes easier. Then I loaded the Visualforce page in Chrome, right clicked on the radio buttons and selected “Inspect.” This opens a handy debug tool for inspecting the HTML and CSS of a page.
I found the radio button area here:
We can see the class “interviewFormChoicesWithHelp” is applied to the div that held all the labels and choices for the radio button. “dataCol col02” was the
element for the entire field. Finally, we see the <div> with the label and choice for each radio button didn’t have any class assigned.
So with some fidgeting I came up with this style
.interviewFormChoicesWithHelp div
{
display: inline-block !important;
}
Which I placed within the visualforce page. My whole page looked like
<apex:page showheader=”false” sidebar=”false”>
<style>
.interviewFormChoicesWithHelp div
{
display: inline-block; !important
}
</style>
<div id=”theflow”>
<flow:interview name=”Screen_element_test”/>
</div>
</apex:page>
What else do you want to change in a Flow? How else would you like to change the look and feel?
Thank you for this! I have been searching everywhere for some instruction on how to modify flow UI. Do you know how I could replace the loading spinner? Or just creating a new loading spinner that appears over the whole flow?
Thank you for the comment. That’s a great question regarding the loading spinner. It’s not something I’ve looked into. I’ve created my own spinners with Visualforce and also done it with jQuery. I have not tried over-riding the spinner that’s built in. Theoretically, if you could find what the HTML Id/class of the spinner was you might be able to use jQuery or another javascript library to change the look and feel when that spinner came up. No idea if this would actually work though.
What would you replace the spinner with? I’m curious to know what your use case is for wanting to replace it as well if you’re able to share.
Thanks for the reply! It’s not so much that I want to replace the graphic. On desktop it looks fine because the loading spinner appears as an overlay. On Salesforce1 on iOS, it appears at the bottom of the screen, below any choices or display text. This means that it is often pushed below the viewable area and it seems like pressing “next” isn’t doing anything.
I tried copying the waitingcontainer div in other places on the VF page that contains the flow, but it doesn’t seem to do anything.
Not sure if you’re interested, but I was able to solve this by creating an overlay with the SLDS spinner using jquery.
Hi Brian,
great Blog!
I’m looking for a way to adjust my dynamic choice checkboxes from a flow that is wrapped into a VF page. The DIV class is .interviewFormChoicesWithHelp, same as in your instruction. the text is assigned left, as I want it to be, but the choice checkboxes are more center than left.
Any idea?
Julian, thanks for the feedback.
I don’t have an example right now to check. My guess is there’s some parent html element that’s being styled that your dynamic choice is descended from.
So a completely made up example
choices
I would inspect your page and see if there’s a container above the dynamic choice that you may need to also style to the left in order to get the dynamic choices to move over as well.