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
pramod sharma 15pramod sharma 15 

changing command button size in VF page

a. how to increase the command button size in VF pages using the standard styles?

For eg:I changes the colour as below but want to change the button size now.

<apex:commandButton action="{!abcd}" value="New" styleClass="buttonStyle" style="background:LightBlue"/>

b. how to show the buttons  in different lines?

It should be as shown as below in VF page:

Button 1
Button 2

Currently it is shown as in VF page : Button1 button 2

Syntax coded in VF page:

<apex:commandButton action="{!Button1}" value="New" styleClass="buttonStyle" style="background:LightBlue"/>
<apex:commandButton action="{!Button2}" value="New" styleClass="buttonStyle" style="background:LightBlue"/>
SonamSonam (Salesforce Developers) 
To increase the size of the button, you can simply use:
<apex:commandButton title="Save" action="{!save}" style="height:35px;width:500px;" />

To get them one bellow the other, use pageblocksection:

sample:
<apex:pageBlock >
<apex:pageBlockSection >
<apex:commandButton value="Save" action="{!save}" style="height:35px;width:500px;"/>
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:commandButton value="Cancel" action="{!cancel}" style="height:35px;width:500px;"/>
</apex:pageBlockSection>
</apex:pageBlock>
pramod sharma 15pramod sharma 15
Thanks Sonam.

I do not want to use pageblock becuase of UI look requirement I have. I can probably use <br/>

Buttons are displayed to the left most by default if we are not using pageblocks.

But now, how can I move the button slightly towards right or probably to the center of page?
SonamSonam (Salesforce Developers) 
Use the following:
<apex:page standardController="Account" >
<apex:form >
<div align="center">  
<apex:commandButton value="Save"  action="{!save}" style="height:35px;width:500px;"/>
<br/>
<apex:commandButton value="Cancel" action="{!Cancel}" style="height:35px;width:500px;"/>
</div>
</apex:form>
</apex:page>