function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
BrandiTBrandiT 

Visualforce field labels/input won't fill entire screen width, spans only 1 column instead of 2

My visualforce page has a section that should only be 1 column wide.  I've specified 1 column in the page block, but the section still displays the information one half of the screen width.  I need the section to stretch across the page.  Any idea how to fix it?

 

Here's the code that's giving me trouble:

<apex:pageblockSection title="Scorecard" columns="1">

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How well does this fit with the vision*?" style="font-weight:bold"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}"/>

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How effective is this at generating client leads?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}"/>

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How well does this support consumer convenience** of one experience?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}" />

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How would you describe the consumer driven point-of-difference?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}" />

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How adaptable is this to multi-platform distribution?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}" />

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How would you describe the competitive landscape?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}" />

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How much revenue*** does this generate?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}" />

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How operationally complex will this be to implement?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}" />

</apex:pageBlockSectionItem>

 

<apex:pageblockSectionItem >

<apex:outputLabel value="How much time will this take to launch?"/>

<apex:inputField value="{!Ideas_Projects__c.Fits_Vision__c}" />

</apex:pageBlockSectionItem>

 

<apex:outputText >

* Vision, as defined in Internet Strategy document.<br/>

** Convenience as defined by the ability to deliver a "Find, Discover, Buy" experience.<br/>

*** Estimated revenue for first 12 months following launch.

</apex:outputText>

 

</apex:pageblockSection>

 

Any ideas?

Best Answer chosen by Admin (Salesforce Developers) 
TheSwamiTheSwami

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_pageBlockSection.htm

"The number of columns that can be included in a single row of the page block section. Note that a single column spans two cells - one for a field's label, and one for its value. If you use child inputField, outputField, or pageBlockSectionItem components in the pageBlockSection, each of the child components is displayed in one column, spanning both cells. If you use any other components in the pageBlockSection, each of the child components is displayed in one column, displaying only in the rightmost cell of the column and leaving the leftmost column cell blank. "

 

 

This isn't one "column" but it will present the data using the entire screen using two pageBlockSections per row:

 

<apex:page standardController="Contact">
<apex:form >
<apex:pageBlock >
<apex:pageblockSection title="Scorecard" columns="2">
 
<apex:pageblockSectionItem >
    <apex:outputLabel value="How well does this fit with the vision*?" style="font-weight:bold"/>
</apex:pageBlockSectionItem>
<apex:pageblockSectionItem >
    <apex:inputField value="{!Contact.phone}"/>
</apex:pageBlockSectionItem> 

</apex:pageblockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 

Hopefully this example helps.