KatieD KatieD - 5 months ago 26
CSS Question

CSS not working on id on jsp

On my jsp page

outputText
tag when I use id, my css style sheet doesn't pick up on it, but when I change it to class it works.

jsp:

<h:outputText id="namelabel" value="Name:" />


css:

#namelabel {

font-weight: bold;
}


When I used the id for the parent
<h:form>
it does make the font bold for that whole form, so I don't understand the difference, could anyone explain? Feel like im missing something obvious..

At the moment its not a problem, but Im also wondering for future reference if I wanted to give unique CSS rules to that particular
outputText
, or would I just add another class rule to it? I suppose Im asking about best practice here too.

Im also using ajax, netbeans and deploying to GlassFish.

Answer

JSF will change the id of the input box component. The id will changed to following form

form_name:component_id

Use following code for styles

form_name\:id

Ex:

<h:form name="testForm">
<h:outputText id="namelable" value="Name:" />
</h:form>
<style>
#testForm\:namelabel{
font-weight: bold;
}
</style>