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
Improve this question
4
  • 1
    Were you looking for this? stackoverflow.com/q/8768317 Commented Dec 9, 2019 at 19:48
  • 1: stackoverflow.com/questions/11988415/… 2: I have no clue how the first and second link you post are related to this, 3: Read stackoverflow.com/questions/8768317/…, 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... Commented Dec 9, 2019 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? Commented Dec 9, 2019 at 20:00
  • 1
    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. Commented Dec 9, 2019 at 20:07

1 Answer 1

Reset to default
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);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Spring does not add classes to JSF components, nor does Eclipse.
@Kukeltje I suspected it was JSF or Primefaces but from my own knowledge was not able to rule them out as possible suspects.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.