commandButton style customization problem.

Components, Ajax Framework, Utilities and More.
Post Reply
jguerra
Posts: 51
Joined: 26 Aug 2009, 13:03
Contact:

20 Sep 2011, 19:28

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
===========

Code: Select all

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

Code: Select all

<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>

king6887
Posts: 29
Joined: 11 Jul 2011, 12:04

22 Sep 2011, 10:15

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

e.g.

Code: Select all

.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

jguerra
Posts: 51
Joined: 26 Aug 2009, 13:03
Contact:

23 Sep 2011, 19:16

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Bing [Bot] and 1 guest