[SalesForce] Command Button CSS appending btn or call action from HTML5 button

I am trying to style using the SLDS and all of my commandbuttons won't take any of the StyleClasses because commandbuttons are given the class "btn" which makes the SLDS not how it should be.

If I use button

<button class="slds-button slds-button--neutral" >
   SLDS Style
</button>

I get a nice looking button. However, if I use command button, it kind combines the two and certainly doesn't look like the SLDS

    <apex:commandButton value="Close Workday" disabled="{! fullyValid}" 
styleClass="slds-button slds-button--neutral" action="{!validate}/>

One of the main reasons I'm using command buttons is because I want to be able to use ACTION.

1) is there a way to safely override the 'BTN' CSS within the visualforce page (and not throughout the org)?

2) Is there a way to use the HTML5 and still use action without calling via controller methods via JS?

3) If not, how could I call a controller method using JS?

Best Answer

There two things you can try:

Avoid Salesforce standard style:

<apex:page standardStylesheets="false" >

Or trigger a controller method from javascript: Declare an action function (apex:actionFunction tag) at the end of your form and call that function from javascript when doing click on button. See here: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionFunction.htm.

Related Solutions

[SalesForce] Problem with styling apex:commandButton rollover

Try to add background-position: 0 0; to every css class, because the background image position is set to the right top corner of the button (defined in the .btn css class):

input.goButton{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-normal.png')}');
    border-style:none;
    background-position: 0 0;
}
input.goButton:hover{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button_rollover.png')}');
    background-position: 0 0;
}
input.goButton:active{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-pressed.png')}');
    background-position: 0 0;
}

[SalesForce] How to call a standard controller action of a VF page from a VF component

This should be doable by passing an argument of type ApexPages.Action to the component

<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>
 <c:exampleOne saveAction="{!save}"/>
 </apex:form>
</apex:page>

Component: exampleOne

<apex:component >
   <apex:attribute name="saveAction" type="ApexPages.Action" required="true"/>
   <apex:commandButton action="{!saveAction}" />
</apex:component>

This example is covered in the excellent book Visualforce Development Cookbook by the inestimable Keir Bowden (aka @BobBuzzard)

Best Answer

Related Solutions

[SalesForce] Problem with styling apex:commandButton rollover

[SalesForce] How to call a standard controller action of a VF page from a VF component

Related Topic