[SalesForce] Visualforce: How to center a single pageBlockSection column

I need a single column of fields centered in a pageBlockSection. I easily found the "columns" attribute and set the value to "1". When I did, it still aligns the fields to the left with enough room for a second column to fit on the right. How do I achieve a single centered column of fields?

I've tried wrapping the contents of the pageBlockSection in a div using both the alignalign="center" and style="text-align:center". Neither worked.

Example Page:

<apex:page standardcontroller="Account" id="pg">
    <apex:pageBlock >
        <apex:pageBlockSection columns="1">
            <apex:inputText label="My Field" />
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

Output of example page:
enter image description here
Thanks in advance!

Best Answer

I was able to do it, but remember since I'm directly overriding styles defined by Salesforce, there is always the risk that they will break this.

Try this code:

<apex:page standardcontroller="Account" id="pg">

    <style>
    input {
        padding-top: 0;
        width: 100%;
    }
    table.detailList {
        width: 50% !important;
        text-align: center;
        margin: 0 auto;
    }

    </style>

    <apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection columns="1">
            <apex:inputText styleClass="wide-input" label="My Field" />
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>
</apex:page>

This has drawbacks, as you end up having to style all detailList tables - however, it's hard to get access to this table, as it's generated dynamically.

One solution would be to use Javascript to traverse the DOM at runtime to add a custom class. You'd have to navigate up to the table shown in the picture: html view of input wrapped by a table

If you include jQuery in your page, it would be quite easy to add a custom class:

j$(".wide-input").parents("table").eq(1).addClass(yourClass);
//note the use of j$ - see below for the reason.

To include jQuery, you need to add this at the top of your page:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

At the bottom, you need to invoke jQuery's no conflict function. I do this:

j$ = jQuery.noConflict();

I then refer to jQuery by the j$ name following this.

Related Topic