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
sampath kumar 3sampath kumar 3 

Is it possible to align the commandbutton left side of the page block ?

Hi, I'm new to VF , I tried to align commandbutton to the left side of the pageblock by using  dir property even though it is not working .
Can any one suggest me how to resolve this issue

FYI:
<apex:page id="pg">
 <apex:form id="fm">
        <apex:pageBlock title="Contact Details" dir="LTR">
            <apex:pageBlockButtons location="top" dir ="LTR" >
                 <apex:commandButton/>
</apex:pageBlockButtons >
</apex:pageblock>
</apex:form>
</apex:page>
SRKSRK
we have style attribute on button to do that i belive

you can try this 
<apex:commandButton value="test" style="margin-left:70%;"/>

margin-left: to push toward right hand side
margin-right to  to push toward left  hand side
ManojjenaManojjena
Hi Sampath,

Try with below code it wil help !! 
<apex:page id="pg">
    <apex:form id="fm">
        <apex:pageBlock title="Contact Details" >
           <apex:commandButton value="Test"/>
       </apex:pageblock>
    </apex:form>
</apex:page>

Let me know if it helps !!
Thanks
Manoj
pranab khatuapranab khatua
<apex:page id="pg">
<apex:pageBlock title="Contact Details" >
  <apex:form>
                 <apex:commandButton value="Save" action="{!save}" />

   </apex:form>
</apex:pageblock>
</apex:page>
Try this code.
SRKSRK
Just want to understand Manjo and Pranab may be i don't iunderstnd the question correctly 

but i belive it about   "align the commandbutton left side" 

the code you have mention do not have any styling to do that ??
sampath kumar 3sampath kumar 3
Thanks SRK , I have tried that  but it is not working the alignment is  happening to the right side instead of leftside here my component is <div>Output
FYI: <apex:page>
 <apex:form id="fm">
        <apex:pageBlock>
            <apex:pageBlockButtons >
          
                <div id='header' style="margin-left:70%;" onclick='controllerAction();'>
                   save
                </div>
</apex:form id="fm">
        </apex:pageBlock>
            </apex:pageBlockButtons > </apex:page>
 
SRKSRK
Just try to change the margin-left: to margin-right:
as mentioned below
<apex:commandButton value="test" style="margin-right:70%;"/>
JeffreyStevensJeffreyStevens
If that doesn't work - try 
<apex:commandButton value="test" style="text-align:left;" />

if that doesn't work - wrap it in a Div and put the styling on the div
sampath kumar 3sampath kumar 3
I did change for that  <div id='header' style="margin-right:70%;" onclick='controllerAction();'> and tried with text-align earlier eventhough its not working and tried to increase the margin-right:100% even no use  
SRKSRK
try this i have add the style for boht button and div try it out and let me know

<apex:page>

     <head>
           <style>
                 .bPageBlock .pbTitle {
                             width: 0%;
                            }
             </style>
  </head>

<apex:form id="fm">

   <apex:pageBlock title="Contact Details" dir="LTR">
            <apex:pageBlockButtons  style="width:100%" location="top" dir="LTR" >
                 <apex:commandButton value="test" style="margin-right:70%;" />
</apex:pageBlockButtons>
    </apex:pageBlock>

        <apex:pageBlock>
            <apex:pageBlockButtons>
          
                <div id='header' style="margin-left:70%;" onclick='controllerAction();'>
                   save
                </div>
</apex:form id="fm">
        </apex:pageBlock>
            </apex:pageBlockButtons >

</apex:page>
 
SRKSRK
Div version 


<apex:page>

     <head>
           <style>
                 .bPageBlock .pbTitle {
                             width: 0%;
                            }
             </style>
  </head>
<apex:form id="fm">
<apex:pageBlock>
            <apex:pageBlockButtons>
          
                <div id='header' style="margin-left:70%;" onclick='controllerAction();'>
                   save
                </div>
           </apex:pageBlockButtons >
        </apex:pageBlock>
            
</apex:form>
</apex:page>
sampath kumar 3sampath kumar 3
I didnt udnerstand which component your refering in style tag .bPageBlock.pbTitle .could you please specify the ids in components which will be easy for me

 <style>
                 .bPageBlock .pbTitle {
                             width: 0%;
                            }
             </style>
SRKSRK
thoese are standard salesforce component when you use 
<apex:pageBlock> ,<apex:pageBlockButtons> it render as table td and div and these are some classes which salesforce defult bind to those rendered components in backend i am just overriding it as per requirement

did you try that did it work for you ??