1

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!

2
  • Have you tried my technique? It should work for you. Commented Jul 22, 2015 at 8:54
  • I've added to the question with another technique that should work for you. Commented Jul 22, 2015 at 18:24

2 Answers 2

2

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.

2
  • This method does work. However, what I posted was a simple page. On a larger page with other sections this would affect the styling of other inputText tags that should not be centered. Would it not be better to add a style class just for this?
    – Dan
    Commented Jul 22, 2015 at 13:51
  • Yes - it's not easy though - I've added a technique to do this above. Commented Jul 22, 2015 at 18:24
0

The inputText field with a label inside pageBlockSection is converted into an HTML table with two columns. So, it's easier if you don't use it.

<apex:pageBlock>
    <div style="text-align: center;">
        <span style="margin-right: 10px;">My Field</span><apex:inputText />
    </div>
</apex:pageBlock>

You must log in to answer this question.

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