0

I have created a Visualforce page that is just a commandButton and is embedded in the Opportunity layout. All works fine, however, I am having an issue with formatting. I would like this VF page commandButton to line up with the page layout buttons. The issue I seem to be facing is that the page layout buttons are centered on the Salesforce page in total (including Sidebar and Body), whereas my embedded VF page only centers the commandButton in the Body and ignores the sidebar. Is there a way that I can get my commandButton to be centered on the entire page without creating a whole separate VF page to overwrite the Opportunity layout? My page is below:

<apex:page standardController="Opportunity">

<style type="text/css">

.wrapper {
         text-align:center;
}
</style>

    <apex:form >
        <div class="wrapper">
            <apex:commandButton style="background:#99EB99;" value="Edit Initial Summary" onClick="window.open('/apex/SummaryTest?Id={!Opportunity.SumMary__r.Id}','_blank')" rendered="{!IF(Opportunity.SumMary__c != null && Opportunity.Summary_Final__c == null,TRUE,FALSE)}"/>&nbsp;&nbsp;&nbsp;
            <apex:commandButton style="background:#99CCFF;" value="Create Final Summary" onClick="window.open('/{!Opportunity.Sumary__r.Id}/e?clone=1','_blank')" rendered="{!IF(Opportunity.Sumary__c != null && Opportunity.Summary_Final__c == null,TRUE,FALSE)}"/>
        </div>
    </apex:form>

</apex:page>
0

Update: See Below

You should use <apex:pageBlockButtons> to group the buttons. And it will automatically center the button group. This component must be a child component of an

<!-- For this example to render properly, you must associate the Visualforce page 
with a valid account record in the URL. 
For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->


<!-- Page: -->
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
                <apex:inputField value="{!account.type}"/>
                <apex:inputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Update

Override Salesforce style with custom styling.

<apex:page standardController="Account" id="myPage">
    <style type="text/css">
        body .bDetailBlock.bPageBlock, body .individualPalette .bDetailBlock.bPageBlock {
            background-color: yellow;
        }
        .bDetailBlock.bPageBlock .pbBody .labelCol{
            border:0;
        }
        .bDetailBlock.bPageBlock .pbBody .dataCol{
            border:0;
        }
        .bDetailBlock.bPageBlock .pbBody .pbSubheader {
            border:0;
        }       
    </style>
    <apex:form>
        <apex:pageBlock title="My Content" mode="maindetail">
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2" collapsible="false">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
                <apex:inputField value="{!account.type}"/>
                <apex:inputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>    
</apex:page>
  • Saroj, thanks. That gets me the functionality I want, but the formatting is off. Is there anyway to change the background of the pageBlock and remove the colored line? – J. Neilan Sep 10 '15 at 15:49
  • Yes you can do that, please check the updated code above. But it is recomended not to override the default Salesforce styling. – Saroj Bera Sep 10 '15 at 18:31
1
<apex:page standardController="Opportunity">

.wrapper { text-align:center; }

<apex:form >

   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.