1

I apply slds styles on apex:commandButton, but it does it not as in docs but in a strange way:

  1. Standard apex:commandbutton without styles
  2. apex:commandbutton with styleClass="slds-button"
  3. Button without style.
  4. Button with clas="slds-button"

4 buttons only last with the needed style

Code:

<apex:page standardController="Account" extensions="AccountExtension"  sideBar="false">

        <apex:stylesheet value="{!URLFOR($Resource.sfdc_lightning, 'assets/styles/salesforce-lightning-design-system.css')}" />


    <apex:outputPanel id="test">
        <apex:form >
            <div class="slds">
                <div id="startButtonDiv" class="slds-button">
                    <apex:commandButton value="Start" action="{!redirectToProcessing}" id="standardApexButton" rendered="{!showStartButton}" rerender="none"/>
                    <apex:commandButton value="Start" action="{!redirectToProcessing}" id="StyledApexButton" rendered="{!showStartButton}" rerender="none" styleClass="slds-button"/>
                    <button id="NormalButton">Start</button>
                    <button id="styledNormalButton" class="slds-button">Start</button>
                </div>
            </div>
        </apex:form>
    </apex:outputPanel>
</apex:page>

Is there a way to apply styles to apex:commandButton so it will look like a last styled button? Thank you in advance!

2
  • 1
    try standardstylesheet=false
    – Ratan Paul
    Sep 9, 2016 at 10:41
  • Tried, nothing's changed :(
    – EvAzi
    Sep 9, 2016 at 10:42

2 Answers 2

4

You're using the wrong stylesheet. If you want your Visualforce to look more like Lightning, use "salesforce-lightning-design-system-vf.css" instead. Also, see the SLDS topic on Visualforce for some gotchas you'll want to know about while using SLDS in Visualforce.

3
  • @EvAzi You're welcome! I'm still learning SLDS myself, but this was literally the first problem I ran into on my new pages. You should use the VF version for any component that will eventually end up on a VF page, as noted in the documentation.
    – sfdcfox
    Sep 9, 2016 at 10:56
  • How can I get this CSS? Is it already in SF? Dec 6, 2020 at 19:16
  • @patriciajlim Yes, use apex:slds to use the CSS in Visualforce.
    – sfdcfox
    Dec 6, 2020 at 22:04
1

You can now use:

<apex:page lightningStylesheets="true">

see: https://developer.salesforce.com/docs/atlas.en-us.210.0.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm

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.