0

So I am trying to change the styling on the error messages that i get through the element, but for some reason the css isn't applied.

This is an example of a message I'm trying to change:

<p:inputText type="text" class="form-control" id="emailInput" value="#{signupBackingBean.email}" required="true" requiredMessage="This field is required" ></p:inputText>
<p:message for="emailInput" id="emailError" display="text" styleClass="message"></p:message>

and this is the CSS Im trying to apply:

.ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal {
font-size: 5px;
}

Thanks in advance!

Grebalb
  • 113
  • 1
  • 12
  • For the ones just upvoting the previous comment, use the 'close' link to actually vote to close it as duplicate instead of just upvoting the comment – Kukeltje Mar 02 '20 at 07:28
  • Your CSS rule should be more specific than the ones PF is using – Jasper de Vries Mar 02 '20 at 08:50
  • It absolutely works I do this in all my apps. See the docs: https://primefaces.github.io/primefaces/8_0/#/components/message?id=skinning – Melloware Mar 02 '20 at 11:54
  • By the way, browsers might have a minimum font size (5px is very small). There are several issues about that, for example https://stackoverflow.com/questions/2295095/font-size-12px-doesnt-have-effect-in-google-chrome/2295108 – Jasper de Vries Mar 02 '20 at 12:03
  • Thanks for the help! – Grebalb Mar 02 '20 at 17:05

0 Answers0