0

I'm currently building a Visual Flow and everything is working well - the flow of the screens is great, it creates the record in the end successfully, etc. However, one thing I cannot figure out is why the rich text editor for screen input fields doesn't seem to work. For example, on my "Meeting" screen, I have seven picklist fields with their corresponding labels. In the General Info section under the "Field Settings" tab, I have aligned all of the field labels to the left and it displays correctly on the screen in the flow designer, but when I run the flow, they all align to the right next to the user input. Why is this?? This seems to happen for all field types - drop downs, text boxes, number fields, you name it.

Also, I haven't specified that the label be bolded, but it is being displayed in bold font when I run it. What gives? Is this just a known limitation of visual flows?

Btw, I have my flow embedded in a VF page using Contact as the controller and standard stylesheets.

1
  • There isn't any code... this is all configuration using the flow designer. The only code I have is in the VF page, but that's not what I'm modifying to try and align the field labels. Jan 16, 2015 at 18:52

1 Answer 1

2

Just taking a stab at this here without testing first sorry - do you need to use standard stylesheets ? Perhaps disable them in your VF page attributes then add some styling to your flow elements via some custom css.

Edit: I just tested the following and it aligned label to left and removed bold styling. Also, check out the Flow specific css classes doc

<apex:page standardController="contact" showHeader="true">
<style>
.FlowText {
    font-weight: normal;
}
.labelCol {
    text-align:left !important;
}
</style>
<flow:interview name="testflow"/>
</apex:page>
5
  • Thanks, CloudHugger. I'm currently using standard stylesheets in the VF page that the flow is embedded in. What's weird is that regardless of whether or not it's in a VF page or a flow by itself, this standard rich text formatting in the Flow Designer still doesn't work. I could create a custom CSS, but I don't have the time to do that, plus our end users don't mind the standard look and feel of the flow anyways. Jan 20, 2015 at 15:22
  • I'd suggest (untested) its because you're using standard stylesheets in your page. Jan 20, 2015 at 21:26
  • Thanks, CloudHugger! The styling in the VF page worked beautifully. I never knew about the "!important" property either. One more question on the same topic. Now that I've aligned all of my fields to the left and made them normal font, I noticed that all the Flow dropdowns I have a * in front of them - i.e. *Next Steps or *Active Listening. Any thoughts on why this * is showing up? Anything to do with it being required (by default the Flow makes it required)? Jan 26, 2015 at 20:16
  • Here's my VF code... <apex:page standardController="Contact" standardStylesheets="true" showHeader="true" sidebar="false" tabstyle="Contact"> <style> .FlowText { font-weight: normal; } .FlowNumber { font-weight: normal; } .FlowTextArea { font-weight: normal; } .FlowDropdown { font-weight: normal; } .labelCol { text-align: left !important; } </style> <flow:interview name="LTC_RVP_Coaching_Tool" finishLocation="/{!$CurrentPage.parameters.ContactID}" buttonLocation="bottom"> <apex:param name="UserID" value="{!$User.Id}"/> </flow:interview> </apex:page> Jan 26, 2015 at 20:21
  • Glad styling worked for you :) re asterix Im going to go with the fields being required as determined by the flow. Jan 26, 2015 at 20:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .