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:
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
display: inline-block !important;
Which I placed within the visualforce page. My whole page looked like
<apex:page showheader=”false” sidebar=”false”>
display: inline-block; !important
What else do you want to change in a Flow? How else would you like to change the look and feel?