CODEWITHSUNDEEP
htmlcssjsfprimefaces
Demiurg
Demiurg

Reputation: 347

Primefaces styling component class with CSS

How can I change properties of component using CSS?

Let's say I have two buttons: 

<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">

I want all my buttons to have font-size: 14px; so I added this rule:

.ui-button .ui-button-text{
   font-size:14px;
}

But my smallButton should have different size, so I added:

.smallButton{
   font-size:11px;
}

Unfortunatelly this doesn't work. This is produced HTML:

<button class="ui-button ui-widget ui-state-default ui-corner-all
    ui-button-text-only smallButton" (...)>
    <span class="ui-button-text ui-c">MY TEXT</span>
</button>

The text on this button is stil 14px size. How should CSS look like to have all my smallButton font-size: 11px ?

Upvotes: 6

Views: 60290

Answers (3)

Demiurg
Demiurg

Reputation: 347

I found the solution to my problem. All I need is this:

.smallButton.ui-button-text-only .ui-button-text {
    font-size: 11px;
}

So now ui-button-text-only .ui-button-text only apply to the smallButton. I tried it before but with space after .smallButton so it didn't work. Now it is working properly. Thanks for your answers.

Upvotes: 5

Stephane Lallemagne
Stephane Lallemagne

Reputation: 1256

Your problem is related to the loading order of all the CSS. CSS are cascading style sheets. So if you want your .smallButton style to be applied, it must be the last in the css chain, in order to override any previous matching styles.

Check the order of the CSS (see generated source header in your browser)

If you want your CSS to be the last one, you can use this inside your page or template:

<f:facet name="last">
  <h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>

This avoids overuse of !important tag, that works either.

EDIT

This works fine for me on chrome. Chrome says font-size is 11px for ui-button-text embeded span, and displays the first button smaller than the second one, which font-size is 14px.

<style>
.ui-button-text{
   font-size:14px;
}
.smallButton .ui-button-text {
   font-size:11px;
}
</style>

<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>

Also, please notice that the generated html buttons do not have any ui-button class.

Upvotes: 10

unwichtich
unwichtich

Reputation: 13857

PrimeFaces overrides your css with the default rules for the parent form.

You can define your css for the form like this:

form .smallButton{
   font-size:11px;
}

or you can use the !important keyword:

.smallButton{
   font-size:11px !important;
}

See also:

Upvotes: 2

Related Questions