2

I'm trying to style a command link as a command button and I have the code for this,

<apex:commandlink value="Add new Contact" action="{!editNewCont}" styleclass="btn MyBtn">

and my CSS goes like this,

.MyBtn{text-decoration:none;padding:4px;}

But for some reason the MyBtn properties (padding is not applied correctly). How do I do this? Also, is there way I could give the "btn" property as part of the CSS so that my styleclass would be like this,

styleclass="MyBtn" instead of styleclass="btn MyBtn"

Please advise.

  • Is there a reason you can't just use an <apex:commandButton>? – Mark Pond Jul 16 '15 at 15:22
  • Mark, I'm not able to use Command button since I have to pass an apex:parm and it doesn't like apex:commandButtons – JJSHHS Jul 16 '15 at 17:53
  • 1
    If you don't get your CSS inheritance issue squared away, there's some well-known workarounds to allow you to use the <apex:param> tag with a command button. help.salesforce.com/apex/HTViewSolution?id=000002664 – Mark Pond Jul 16 '15 at 18:03
  • Mark, that did it. Thanks for sharing this workaround. Is there a way to flag your comment as the 'answer', that would help others like me. – JJSHHS Jul 16 '15 at 18:25
  • Hey @JJSHHS have you tried with .MyBtn{text-decoration:none;padding:4px !important ;} – Ratan Paul Nov 26 '15 at 7:57
0

I can't tell you why the padding isn't being applied without seeing your page, but I suggest that you check to see whether the styling is being overridden by another element; you can do this using the Developer Console.

With regard to your second point, you would need to copy the definition for btn into MyBtn - but if btn is a Salesforce-defined class, this is not a good idea (as your copy may become outdated with future updates to Salesforce).

  • I believe the default salesforce style btn overrides the MyBtn styling. Is there anyway to prevent that? – JJSHHS Jul 16 '15 at 17:56
  • JJSHHS, you'll need to change the MyBtn styling to take precedence over the .btn styling. You can use CSS specificity to do this. See smashingmagazine.com/2007/07/27/… – Rob Jul 16 '15 at 18:00
0

Try adding !important next to your padding attribute, like padding: 4px !important;, in your CSS tag.

If it doesn't work, then why not just use the style attribute of the commandLink? You can put the padding in there too (but it will only be applied to that specific link).

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.