How to Align Flow Radio & Checkboxes Horizontally

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>

 Refreshed, and viola

What else do you want to change in a Flow? How else would you like to change the look and feel?

Recommended Posts
Showing 4 comments
  • Raj Bhatt
    Reply

    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?

    • Brian Kwong
      Reply

      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.

      • Raj Bhatt
        Reply

        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.

      • Raj Bhatt
        Reply

        Not sure if you’re interested, but I was able to solve this by creating an overlay with the SLDS spinner using jquery.

Leave a Reply