Play Games

Search This Blog

Wednesday, April 23, 2014

How to increase the width of a column of page block table

When working with <apex:pageblocktable> ,sometimes we need to adjust the width of columns.
In order to do that we need to use  "columnsWidth" attribute of  <apex:pageblocktable> and specify the width of columns in order in terms of percentages
for examples if there are 3 columns,then

<apex:pageBlockTable value="{!account}" var="item" columnsWidth="60%,20%,20%">

If  column have some input fields,then to increase the textfield area, we can use styes.
For example
   <apex:column headerValue="Site Name">    <apex:inputfield value="{!item.Site}" id="amt" style="width: 360px; height: 40px"/></apex:column>

Here site is a input field.

The following Example will give an idea..

Create a visualforce  page with the folowing code

<apex:page standardController="Account" showHeader="false" sidebar="false">
<apex:form >
    <apex:pageBlock title="Increase Columns Width">

        <apex:pageBlockTable value="{!account}" var="item" columnsWidth="80%,20%">

            <apex:column headerValue="Site Name">    <apex:inputfield value="{!item.Site}" id="amt" style="width: 360px; height: 40px"/></apex:column>
             <apex:column value="{!item.name}"/>

        </apex:pageBlockTable>

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

The output will be as follows







    

No comments:

Post a Comment