[SalesForce] column width for pageBlockSection

How about something like this:

<apex:page controller="TestScrollController">
    <apex:pageBlock >
        <apex:pageBlockSection title="List Of Numbers" columns="2" >   
            <apex:pageBlockSectionItem id="columnWithScroll">
                <apex:outputPanel layout="block" style="overflow: auto; height: 100px;">
                    <apex:repeat value="{!numbers}" var="number">
                        <apex:outputText value="{!number}" />
                        <br/>
                    </apex:repeat>
                </apex:outputPanel>
            </apex:PageBlockSectionItem>
            <apex:pageBlockSectionItem id="columnWithoutScroll">
                <apex:outputPanel >
                    <apex:outputText value="I don't want this section to move" />
                    <br/><br/>
                    <apex:outputText value="If the left column gets too long" />
                </apex:outputPanel>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>

</apex:page>

Which yields the following (note the scroll bar on the panel):

Use the overflow: auto css on the output panel. By using an output panel with layout="block", we get a DIV within the layout table produced by Salesforce. Once we have a div, you can specify the overflow you require. I've set the size to 100px for illustrative purposes.

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:

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.