Adding CSS class or style to p:message

Question

I have single p:message for which I want to set display: inline-block.

I've tried the following:

<p:message ... styleClass="inline-block" style="display:inline-block;/>

But when I see the sources, both style and class are NOT rendered on the div with messages.

Is there any way to specify the custom CSS attributes to the p:message directly?

I'm aware I can wrap it with div and steer the CSS of the children of that div, but I'd like to avoid superfluous wrapping, if possible.

PrimeFaces version: 3.5.

@ukasz-l Primefaces Version you are running? – Mindwin Remember Monica Mar 07 '14 at 14:20 — Mindwin Remember Monica, Mar 07 '14 at 14:20

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Have to disagree with Hatem Alimam

As the mykong article goes, you should add your stylesheet to override the Primefaces CSS.

!important in CSS stylesheet is seen as bad practice. Check these quick SO answers to see what the SO community thinks:

Is !important bad for performance?

What are the implications of using “!important” in CSS?

Is it bad to use !important in css property

The last one has an answer in defense of the !important but brings about the problem when several !important rules come into play (and if you start using it without reserve, you are bound to have it blow in your face and they start cascading one after the other.

The right way to do it is either to make your stylesheet have precedence over the PF sheet, to make your selectors get precedence over the ones in PF in the cascading.

Google for CSS selector Specificity for more on how to make sure your rule is picked by the browser over the PF ones (I am at work now and can't access blogs).

Onto your specific question:

The attributes do not work because they are not coded in the component. Check the PF user guide for your particular PF version (at the time of this writing, you have not stated your version). The <p:messages> component has a rather peculiar way of rendering.

for your particular case, add the following rule:

.ui-messages.ui-widget {
    display: inline-block;
}

This doesn't help if there are several messages, however, and you only want to edit one. I am having a very similar problem with not being able to add a class, id,or style to a — Willow, Feb 10 '15 at 03:15
I just solved my own question. I am a silly person. Just wrap the — Willow, Feb 10 '15 at 04:17
I want to use a new styleClass by myself. Change directly to `ui-messages.ui-widget` is not really a good idea. Do you have any suggestion? — Xuan Nguyen Mai, Aug 04 '15 at 03:59
@Xuna make a new site question if no one you found solves your problem. — Mindwin Remember Monica, Aug 04 '15 at 12:52

Adding CSS class or style to p:message

1 Answers1