2

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
    Commented Sep 9, 2016 at 10:41
  • Tried, nothing's changed :(
    – EvAzi
    Commented 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
    Commented Sep 9, 2016 at 10:56
  • How can I get this CSS? Is it already in SF? Commented Dec 6, 2020 at 19:16
  • @patriciajlim Yes, use apex:slds to use the CSS in Visualforce.
    – sfdcfox
    Commented 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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .