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 '16 at 10:41
  • Tried, nothing's changed :( – EvAzi Sep 9 '16 at 10:42
3

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 '16 at 10:56
  • How can I get this CSS? Is it already in SF? – patriciajlim Dec 6 '20 at 19:16
  • @patriciajlim Yes, use apex:slds to use the CSS in Visualforce. – sfdcfox Dec 6 '20 at 22:04
0

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.