0

Has anyone been successful in overriding the FlowPageBlockBtns CSS for a Visual Workflow VF page? https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_flows_customize_runtime_ui.htm

I want to center the buttons and have tried to override the Salesforce CSS several ways but none of them work, the buttons still end up with text-align:right. See code and resulting screenshot where the override hasn't taken effect.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<style>
    .FlowPageBlockBtns, 
    .pbHeader .pbButton td,
    .pbHeader .td {
        text-align: left !important;
    }

    body {
        font-size: 1.2em;
    }
</style>

<div>
    <div style="text-align: center;">
        Quote Request Form
    </div>
</div>
<flow:interview name="Quote_Request_Form" />

enter image description here

Improve this question

2 Answers 2

Reset to default
1

I've not worked with CSS in Flows, but your image and the documentation you linked to indicates the buttons are a child of an element named .pbBottomButtons which holds each button inside it; apparently at the bottom. I suspect that's either a DIV or a TD depending on how the pageblock is constructed where the buttons are located.

If you actually do have a pageblock, you'll want to change your CSS to look more like this: 

.PageBlock > .FlowPageBlockBtns {
   padding 5px 12px;
   text-align: center;
}

The > means that the one is a child of the other. Normally, I wouldn't consider a button or "button group" a child of a header unless it was contained within the header. They could easily be a child of a TD in this situation. The padding setting, may or may not be necessary.

Note: What I've written is based entirely on the documentation you referred to along with a bit of what you've included in your post and hasn't been tested. Use and adjust accordingly.

Improve this answer
1
  • My mistake -- I was running the flow directly instead of going to the VF page to let it run. Arrggh! The CSS overrides are working fine in the VF page. Commented Apr 15, 2016 at 21:07
0

My mistake -- I was running the flow directly instead of going to the VF page to let it run. Arrggh! The CSS overrides are working fine in the VF page.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.