0

I am working on an eclipse project using Spring, JSP, PrimeFaces 6.2, and bootstrap 3.37.

I have two boxes, one of which correctly has the CSS applied, the other does not.

I have some specific css styles in override.css. It targets the custom class tag I am using, and then changes the background colour.

.mytag
{
    background-color: rgb(255,204,204);
}

My page construction looks like this

  • head - loads a sub-folder header page
  • body - loads form pages
  • footer
<h:head>
    <title>#{text['form.title']}</title>
    <h:outputStylesheet library="css" name="form.css"/>
    <h:outputScript library="js" name="form.js"/>
    <h:outputStylesheet library="css" name="override.css" />    
</h:head>

The only CSS that is applied in the file is the "mytag" but as displayed below many more are being auto-inserted.

header css tags

ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all mytag

not header css tags

ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all mytag

When I use the F12 Developer Tools for IE (its an IE specific site/application) and look at the styles, from highest to lowest I see for the one that does not work

  • form.css span.if .ui-inputfield, div.if .ui-inputfield
  • components.css .ui-widget-header .ui-inputfield, .ui-widget-content .ui-inputfield
  • theme.css .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield
  • (background) theme.css .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
  • theme.css .ui-widget .ui-widget
  • form.css .ui-widget, .ui-widget .ui-widget
  • (background) theme.css .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield
  • theme.css .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
  • theme.css .ui-widget .ui-widget
  • theme.css .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
  • theme.css .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
  • components.css .ui-inputfield
  • override.css .mytag

Here is the style list for the one that does work

  • forms.css span.if .ui-inputfield, div.if .ui-inputfield
  • componets.css .ui-inputfield
  • override.css .mytag

So both boxes have the same code section applying the CSS, so the ordering should be the same. Yet I find that "form.css" and "components.css" consistently have higher prioirty than my override, regardless of how I order them in the header. Its worse for the box that isnt working because the "theme.css" is being applied automatically.

Note: I originally thought it was the bootstrap.theme.css, but another question/answer has lead me to believe that it is actually primefaces theme. <h:outputStylesheet library="primefaces-aristo" name="theme.css" />

Solutions I have tried

  • reordering the css elements in the head
  • having the override.css added after page load from this answer (the override.css wasnt there at all, so I must have done it wrong)
  • including the primefaces theme before the override
  • <f:facet name="first|middle|last"> from this answer
Fering
  • 322
  • 2
  • 18
  • 1
    Were you looking for this? https://stackoverflow.com/q/8768317 – BalusC Dec 09 '19 at 19:48
  • 1: https://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used 2: I have no clue how the first and second link you post are related to this, 3: Read https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles, 4 learn the basics of CSS,what you refer to as 'css tags are automatically inserted' are actually css classes and they are not automatically 'inserted' they are renderedd by PrimeFaces... – Kukeltje Dec 09 '19 at 19:49
  • @BalusC I tried moving the css reference into the body like it mentions in the answer you shared but that did not work. So its further details about CSS specificity must be my issue. But that raises the question of why the identical css tags for the other box works? – Fering Dec 09 '19 at 20:00
  • Yes, it does appear I didnt know the CSS rules. Only one I knew was that the last one loaded was considered most important (not counting inline). I wasnt aware that multiple-tags mattered for some kind of weighting. I would have thought my new specific tag was the most specific so I will have to work on that I guess. Working with CSS is not my area generally. – Fering Dec 09 '19 at 20:07

1 Answers1

0

If anyone is interested, as my issue was due to specificity as mentioned in the comments by BalusC and Kuleltje. The question they pointed to did solve the issue.

Due to the automatically added class tags from JSF or primefaces, I had to modify the override.css file to be a better match.

.ui-inputfield.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.mytag
{
    background-color: rgb(255,204,204);
}
Fering
  • 322
  • 2
  • 18