1

I have a Visualforce page using slds styling, and some of it works and some of it doesn't.

  1. The pageBlock title does not have the shaded area around it - just displays the text in bold

  2. The commandButton ignores the slds-button--brand styling when it's in a pageBlockButtons group. If I place it outside the buttons group, then it uses the brand styling. enter image description here What am I missing?

My VF page:

<apex:page standardcontroller="Account" title="Verify Identity" extensions="AccountControllerExtension" sidebar="true" lightningstylesheets="true">
<apex:slds >
<apex:form id="pgForm">
    <apex:outputPanel id="spin">
        <div id="spinner" class="slds-spinner_container slds-hidden">
            <div class="slds-spinner--brand slds-spinner slds-spinner--large" role="status">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </apex:outputPanel>
    <apex:pageBlock title="Account: {!account.Name}">
        <apex:pageBlockButtons location="bottom">
            <apex:commandButton styleClass="slds-button slds-button--brand buttonclass" value="Back to Account" action="{!cancel}" style="margin-top: 5px;"/><br/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection columns="2">
            <apex:pageBlockSectionItem>
                <apex:selectRadio value="{!verifyOption}" onclick="document.getElementById('spinner').classList.remove('slds-hidden')">
                    <apex:selectOptions value="{!items}"/>
                    <apex:actionSupport event="onchange" reRender="verify, spin, explanation,messages" action="{!verifyIdentity}"/>
                </apex:selectRadio>
            </apex:pageBlockSectionItem>
            <apex:outputPanel id="explanation">
                <apex:outputPanel rendered="{!verifyOption == 'Not Required'}">
                    {!$Label.AMLNotRequiredExplanation}
                </apex:outputPanel>
                <apex:outputPanel rendered="{!verifyOption == 'Manual'}">
                    {!$Label.AMLManualVerification}
                </apex:outputPanel>
                <apex:outputPanel rendered="{!verifyOption == 'EIV'}">
                    {!$Label.AMLUsingEIV}
                </apex:outputPanel>
            </apex:outputPanel> 
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:outputPanel id="messages" rendered="{!NOT(showVerifyingMsg)}">
        <apex:pageMessages />
    </apex:outputPanel>
    <apex:outputPanel id="verify" layout="none">
        <apex:pageBlock title="Key Information" mode="edit" rendered="{!verifyOption != null}">
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton styleClass="slds-button slds-button--brand buttonclass" value="Save and Submit for EIV" action="{!saveAndSubmit}" style="margin-top: 5px;" rendered="{!verifyOption == 'EIV'}" onclick="document.getElementById('spinner').classList.remove('slds-hidden')"/>
                <apex:commandButton styleClass="slds-button slds-button--brand buttonclass" value="Save Manual Verification" action="{!saveManual}" style="margin-top: 5px;" rendered="{!verifyOption == 'Manual'}" onclick="document.getElementById('spinner').classList.remove('slds-hidden')"/>
                <apex:commandButton styleClass="slds-button slds-button--brand buttonclass" value="Save Setting" action="{!saveNR}" style="margin-top: 5px;" rendered="{!verifyOption == 'Not Required'}" onclick="document.getElementById('spinner').classList.remove('slds-hidden')"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection columns="1" rendered="{!verifyOption == 'EIV' || verifyOption == 'Manual'}">
                <apex:pageBlockSection title="Identity Consent" columns="1" rendered="{!verifyOption == 'EIV'}" collapsible="false">
                    <apex:inputField value="{!account.Identity_Consent__c}"/>
                </apex:pageBlockSection>
                <apex:pageBlockSection title="Name" columns="2" collapsible="false">
                    <apex:inputField value="{!account.FirstName}" required="true"/>
                    <apex:inputField value="{!account.LastName}"/>
                </apex:pageBlockSection>
                <apex:pageBlockSection title="National ID Details" columns="2" collapsible="false">
                    <apex:pageBlockSectionItem helpText="{!$ObjectType.Detail__c.fields.Passport__c.InlineHelpText}" rendered="{!verifyOption == 'Manual'}">
                        <apex:outputLabel value="Passport"/>
                        <apex:inputField value="{!acert.Passport__c}"/>
                    </apex:pageBlockSectionItem>
                    <apex:inputField value="{!account.Individual_does_not_have_Passport__c}" rendered="{!verifyOption == 'EIV'}"/>
                    <apex:pageBlockSectionItem helpText="{!$ObjectType.Detail__c.fields.Driver_License__c.InlineHelpText}" rendered="{!verifyOption == 'Manual'}">
                        <apex:outputLabel value="Driver License"/>
                        <apex:inputField value="{!acert.Driver_License__c}"/>
                    </apex:pageBlockSectionItem>
                    <apex:inputField value="{!account.Individual_does_not_have_Drivers_Licence__c}" rendered="{!verifyOption == 'EIV'}"/>
                    <apex:inputField value="{!account.Passport_Number__c}"/>
                    <apex:inputField value="{!account.Driver_Licence_Number__c}"/>
                    <apex:inputField value="{!account.Passport_Expiry_Date__c}"/>
                    <apex:inputField value="{!account.Driver_Licence_Expiry_Date__c}"/>
                    <apex:pageBlockSectionItem >
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem>
                        <apex:outputLabel value="Version No."/>
                        <apex:inputField value="{!account.Driver_Licence_Code__c}"/>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection>
                <apex:pageBlockSection title="Address" columns="2" collapsible="false">
                    <apex:pageBlockSectionItem>
                        <apex:outputLabel value="Street"/>
                        <apex:inputField value="{!account.BillingStreet}" required="true"/>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem >
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel value="Suburb"/>
                        <apex:inputField value="{!account.BillingCity}" required="true"/>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem>
                        <apex:outputLabel value="City"/>
                        <apex:inputField value="{!account.BillingState}" required="true"/>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel value="Post Code"/>
                        <apex:inputField value="{!account.BillingPostalCode}" required="true"/>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel value="Country"/>
                        <apex:inputField value="{!account.BillingCountry}" required="true"/>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:outputPanel>
</apex:form>
</apex:slds>

1

I played around some more and now have this below.

enter image description here 1: I removed the 'title' from the pageBlock section and added a div instead:

<apex:pageBlock mode="edit" rendered="{!verifyOption != null}">
    <div class="slds-box slds-text-heading_medium slds-size_full slds-theme_inverse slds-text-color_inverse">Key Information</div>

2: and when I remove the pageBlockButtons and replace it as below, the styling for the buttons works. I've placed this just above the closing tag as the 'position' option is not available on a div.

<div class="slds-button-group slds-m-top--small slds-align_absolute-center" role="group">
    <apex:commandButton styleClass="slds-button slds-button--brand buttonclass" value="Save and Submit for EIV" action="{!saveAndSubmit}" style="margin-top: 5px;" rendered="{!verifyOption == 'EIV'}" onclick="document.getElementById('spinner').classList.remove('slds-hidden')"/>
    <apex:commandButton styleClass="slds-button slds-button--brand buttonclass" value="Save Manual Verification" action="{!saveManual}" style="margin-top: 5px;" rendered="{!verifyOption == 'Manual'}" onclick="document.getElementById('spinner').classList.remove('slds-hidden')"/>
    <apex:commandButton styleClass="slds-button slds-button--brand buttonclass" value="Save Setting" action="{!saveNR}" style="margin-top: 5px;" rendered="{!verifyOption == 'Not Required'}" onclick="document.getElementById('spinner').classList.remove('slds-hidden')"/>
</div>

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.