You need to sign in to do that
Don't have an account?
wt35
styleClass does not work with apex:commandButton
Hi all,
I am trying to use the styleClass attribute to apply a specific style to a button but it doesn't work.
When I apply the same style inline in the tag it works.
The tag is <apex:commandButton>, any hint?
(I only managed so far to modify the background colour of the button inline)
Thanks for explaining me what can be wrong in my code:
<apex:page > <style type="text/css"> .myClass { color:white; background-color:#00CC00; } </style> <apex:commandButton styleClass="myClass" action="{!someAction}"> </apex:outputText> </apex:page>
All Answers
Hi Just put
It will work. If it does not work pleaselet me know.
Style class doesn't support , you have to try this
<div class="myclass"><apex:commandButton action="{!someAction}" value="action"/></div>
I have solved this myself by adding the CSS !important annotation.
standardStylesheets = false did not work.
Nesting the button in a <div> had the background colour overlapping in an entire line, which I did not want
My code is
.buttonStyle {
font-color:white;
text-align:center;
}
-.............
.............
<apex:commandButton value="Save" styleClass="buttonStyle" style="background:blue" action="{!Truethat}"/>
I see that the color of my button is changing , but I am not able to see the change in the font color.
Can anyne suggest me how to change the code so that the font color cn alos be changed aling with the background color of the button.
Thank you
Nimesh
For font color you can add inline css code as style="background:blue; color:white"
<style>
.submit {
cursor: pointer;
border-radius: 5em;
color: #fff;
background: linear-gradient(to right, #9C27B0, #E040FB);
border: 0;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 10px;
padding-top: 10px;
font-family: 'Ubuntu', sans-serif;
margin-left: 35%;
font-size: 13px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
}
</style>
<body>
<apex:form>
<apex:commandButton value="Save" styleClass="submit"/>
</apex:form>
</body>
</apex:page>