+ Start a Discussion
Vadivel MuruganVadivel Murugan 

Cell Spacing

I have create pageblocksection with 3 columns and i would like to reduce the cell spacing in visualforce page. how to reduce the cell space in vf page
Sameer PrasonnSameer Prasonn
Hi Vadivel,

Since we are using the standard UI component so default style is applied to it. there are two way to reduce the standard cellpadding.
1. remove the default style by applying standardStylesheets=false. and then apply your style.
2. just apply following style on the page and your are done.
<apex:page controller="myTestCls">
<style>
	.detailList {
    	width: 40%;
    }
</style>
<apex:form>
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockSection title="My Content Section" columns="3">
                <apex:inputText value="{!name}"/>
                 <apex:inputText value="{!site}"/>
                 <apex:inputText value="{!types}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
here is the sample output
output for the code
you can cover use both the method. Please mark it as a best answer if it really help

Sameer B.
Amit Chaudhary 8Amit Chaudhary 8
Hi Vadivel,

To set the size of inputTest you can use the size attribute. Please try below code.
<apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockSection title="My Content Section" columns="3">
                <apex:inputText value="{!name}" size="10"/>
                 <apex:inputText value="{!site}"  size="8"/>
                 <apex:inputText value="{!types}  size="5"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
Please mark it as a best solution if this will help you