+ Start a Discussion
Shruthi MN 19Shruthi MN 19 

Alignment of button

Can anyone help me in aligning the buttons to right

<apex:page standardController="Quotes__c" extensions="ProductSearchPopupController" showHeader="false" sidebar="false" lightningStylesheets="true">
   
    <apex:form id="form" >
        <apex:pageMessages ></apex:pageMessages>
        <apex:messages />
        <div style="width 100%">
            <apex:pageBlock title="Add Products" id="block" rendered="{!block}"> 
                <centre>
                    <div align="center"  >
                    <apex:pageBlockSection columns="1" id="section" > 
                        Enter the product to be added and select Go<br/>
                        
                        <apex:inputText value="{!query}" id="query"/> 
                    </apex:pageBlockSection> 
                  </div>
                </centre>
                <right>
                <apex:commandButton value="Go" action="{!runQuery}" style="border-style:solid;
                     color:white; class:centre;background-color:rgba(13, 112, 165, 1);style=float:right;"/>
                <apex:commandButton value="Cancel" action="{!cancel}" style="border-style:solid;
                     color:rgb(21, 137, 238); background-color:white;" />
                      </right>
            </apex:pageBlock>
                
            <apex:pageBlock id="block1" rendered="{!block1}" >
                <apex:pageBlockSection columns="1">
                    <apex:pageBlockTable value="{!wrapProductList}" var="accWrap">
                        <apex:column >
                            <apex:facet name="header">
                                <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                            </apex:facet>
                            <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>
                        </apex:column>
                        <apex:column headerValue="Name">
                            <apex:outputLink value="#">{!accWrap.acc.Name}</apex:outputLink>       
                        </apex:column>
                        <apex:column headerValue="Product Code">
                            <apex:outputText value="{!accWrap.acc.ProductCode__c}"  />       
                        </apex:column>
                        <apex:column headerValue="Product Description">
                            <apex:outputText value="{!accWrap.acc.Product2Id__r.Product_Description__c}"  />       
                        </apex:column>
                        <apex:column headerValue="Unit Price">
                            <apex:outputText value="{!accWrap.acc.UnitPrice__c}"  />  
                        </apex:column>
                        <apex:column headerValue="Standard Price">
                            <apex:outputText value="{!accWrap.acc.UseStandardPrice__c}"  />  
                        </apex:column>
                    </apex:pageBlockTable>  
                    <apex:commandButton value="Next"   action="{!processSelected}" style="border-style:solid;
                     color:white; background-color:rgba(13, 112, 165, 1);align-items: right;justify-content:right;"/>  
                </apex:pageBlockSection>
            </apex:pageBlock>
        </div>
        <div>
            <apex:pageBlock id="block2" rendered="{!block2}" >
                <apex:pageblockSection title="All Products" collapsible="false" columns="3">
                    <apex:pageBlockTable value="{!selectedProduct}" var="c" id="table2" title="Selected Products">
                        <apex:column value="{!c.Name}" headerValue="Product Name"/>
                        <apex:column headerValue="Sales Price">
                            <apex:inputText value="{!c.UnitPrice__c}" id="UnitPrice" /> 
                        </apex:column>
                        <apex:column headerValue="Discount">
                            <apex:inputText value="{!discount}" id="discount" /> 
                        </apex:column>
                        <apex:column headerValue="Quantity">
                            <apex:inputText value="{!quantity}" id="quantity" /> 
                        </apex:column>
                    </apex:pageBlockTable>  
                </apex:pageblockSection>
                <apex:commandButton action="{!GoBack}" value="Back" style="border-style:solid;
                     color:white; background-color:rgba(13, 112, 165, 1);"/>
                <apex:commandButton action="{!saveproduct}" value="Save" style="border-style:solid;
                     color:white; background-color:rgba(13, 112, 165, 1);"/>
                <apex:commandButton value="Cancel" oncomplete="doRedirect()" style="border-style:solid;
                     color:rgb(21, 137, 238); background-color:white;"/>           
            </apex:pageBlock>
            </div>
           
        
    </apex:form>
</apex:page>
Ajay K DubediAjay K Dubedi
Hi Shruthi,

I have gone through your issue and code.
In your code, find this line - 

style="border-style:solid;color:white; class:centre;background-color:rgba(13, 112, 165, 1);style=float:right;"

And replace it with this -

style="border-style:solid;color:white; class:centre;background-color:rgba(13, 112, 165, 1);float:right;"

If it works, apply it to other buttons. The problem was that you typed style two times in your script.


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
Deepali KulshresthaDeepali Kulshrestha
Hi Shruthi,

In your apex command button code, you are using a style tag twice. That is why your alignment is not working. Just remove the repeated style tag.

<apex:commandButton value="Go" action="{!runQuery}" style="border-style:solid;
                     color:white; class:centre;background-color:rgba(13, 112, 165, 1);float:right;"/>


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com
ben lenben len

Did your problem Solved? 

This also occurs on my EasySheet (https://easysheet.com/)