+ Start a Discussion
pramod sharma 15pramod sharma 15 

increase the 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"/>
Best Answer chosen by pramod sharma 15
Hargobind_SinghHargobind_Singh
You can add width to your inline style, and use <br/> or <p> to have line breaks between buttons. 

e.g.: 
 
<apex:commandButton action="{!Button1}" value="New" styleClass="buttonStyle" style="background:LightBlue;width:150px;"/>
<p/>
<apex:commandButton action="{!Button2}" value="New" styleClass="buttonStyle" style="background:LightBlue;width:150px;"/>



 

All Answers

Hargobind_SinghHargobind_Singh
You can add width to your inline style, and use <br/> or <p> to have line breaks between buttons. 

e.g.: 
 
<apex:commandButton action="{!Button1}" value="New" styleClass="buttonStyle" style="background:LightBlue;width:150px;"/>
<p/>
<apex:commandButton action="{!Button2}" value="New" styleClass="buttonStyle" style="background:LightBlue;width:150px;"/>



 
This was selected as the best answer
pramod sharma 15pramod sharma 15
Thanks Hargobind...it works
pramod sharma 15pramod sharma 15
My buttons are displayed to the left most of the screen. How can I make them displayed little towards right or exactly at the center of the screen?
pramod sharma 15pramod sharma 15
I do not want to use pageblocks as I want a different look for mobile apps
Hargobind_SinghHargobind_Singh
Just encapsulate both buttons in <Center> </Center>