Board index JavaServer Faces General commandButton style customization problem.

commandButton style customization problem.

Components, Ajax Framework, Utilities and More.


Posts: 51

Hi,

I came across a problem with the style configuration of buttons. I am not sure how to handle this, so I ask for someone to help me out on this.
Button id="1" the styleClass field is applied successfuly, but on button id="2" the styleClass is not applied, it doesn't apply the customized colors, so I am wondering now what i am doing wrong. Can anyone spot any problem when it's applied a styleClass on a button and the button is a part of column in a dataTable component?. Is the css right for this case?

Cheers,

== Updated==
Using PF 3.0M3
===========

.myCustomStyle {
      border-width:1px;
      border-color: #000000;
      border-style: solid;
      text-align: center;
      font-weight: bold;
      background: #FF8000;
      color: #FFFFFF;
      width: 100%;
}


<p:commandButton id="1" value="#{system.state}" styleClass="myCustomStyle" />
<p:dataTable id="registeredtable" var="system" value="#{ocsSystems.systems}"  >
     <p:column style="width:150px"> 
                    <h:outputText value="#{system.system}" style="font-weight:bold"/>
        </p:column>
     <p:column style="width:100px"> 
                  <p:commandButton id="2" value="#{system.state}" styleClass="myCustomStyle" />
        </p:column>
</p:dataTable>


Posts: 29
I suspect it comes down to CSS specificity, if you are using a theme.

e.g.
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #aca19d; background-color: #dfdbda; font-weight: normal; color: #555555; }


".ui-widget-content .ui-state-default" has 2 items listed, so it's worth 20 points.
".myCustomStyle" has 1 item listed so worth 10 and hence gets overridden by the above.

you could try changing it to ".myCustomStyle, .ui-widget-content .myCustomStyle" so it'll deal with buttons inside and outside of other components. Assuming the stylesheet you are using is called after the theme, that should then override it. Failing that, i'm not sure what it could be without seeing it first hand.
Running PrimeFaces 3.0.M2 / 3.0.M4 using Mojarra-2.1.3 on Glassfish 3.1.1


Posts: 51

It works!
Yes, I am using a custom theme. You are right!. Thanks a million for your clues.


Return to General