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!

  • Have you tried my technique? It should work for you. – Caspar Harmer Jul 22 '15 at 8:54
  • I've added to the question with another technique that should work for you. – Caspar Harmer Jul 22 '15 at 18:24
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.

  • 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 Jul 22 '15 at 13:51
  • Yes - it's not easy though - I've added a technique to do this above. – Caspar Harmer Jul 22 '15 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.