top of page

Visualforce- how to “stretch” columns in a table inside an apex:pageblocksection

  • Writer: Charly Prinsloo
    Charly Prinsloo
  • May 7, 2011
  • 1 min read

Using apex:pageblocksections are a great way to tidy up a page, and also a great look and feel for a vf page.

One issue in an apex:pageblocksection, is that the columns in a apex:datatable or apex:pageblocktable only seem to stretch halfway across the page, even if you specify the width.

<apex:pageBlockSection title="Diner Details">

<apex:dataTable value="{!Mystery_Diner_Report__c}" var="mdr" width="100%" columns="2" columnsWidth="60%,40%">

<apex:column id="c7" headerValue="Account Name">

<apex:outputField value="{!mdr.Account_Name__c}" />

</apex:column>

</apex:dataTable>

</apex:pageBlockSection>

The solution is to add a Column attribute into the apex:pageblocksection, and add a width attribute into the datatable or pageblocktable, e.g.:

<apex:pageBlockSection title="Diner Details" columns="1">

<apex:outputPanel >

<apex:dataTable value="{!Mystery_Diner_Report__c}" var="mdr" width="100%" columns="2" columnsWidth="60%,40%">

<apex:column id="c7" headerValue="Account Name">

<apex:outputField value="{!mdr.Account_Name__c}" />

</apex:column>

</apex:dataTable>

</apex:outputPanel>

</apex:pageBlockSection>


 
 
 

Follow

  • facebook
  • linkedin
  • twitter

All content copyright Charly Prinsloo © 2017 • All rights reserved.

bottom of page