how to properly use css in jsf?

Question

I have this JSF page with a css file that works fine, however, when i add the form tag css does not apply to the jsf. could someone help me?

<f:view contentType="text/html">
    <h:head>
        <h:outputStylesheet library="css" name="LoginCss.css" />
    </h:head>

    <h:body>
         <h:form id="loginForm"> 
              <p:outputLabel id="usernameLabel" value="User name: " />
              <p:inputText id="usernameInput" value=""/> <br/> <br/>

              <p:outputLabel id="passwordLabel" value="Password: " />
              <p:inputText id="passwordInput" value=""/> <br/> <br/>
         </h:form>
    </h:body>

</f:view>

i'm sorry there's a <h:form> </h:form> that is missing. it is : "When i add the <h:form> </h:form> tag css does not..." — Sina Barghidarian
– Sina Barghidarian, Commented Jul 27, 2014 at 7:14
If you open the sourcecode in the browser, try to click on the generated link to the css-file. If it doesn't output the CSS file in question, your link is broken. — Menno
– Menno, Commented Jul 27, 2014 at 7:23
sorry, i didn't catch you, what link? i view the source code in browser and there is the url of css. so i'm not sure if it is broken. — Sina Barghidarian
– Sina Barghidarian, Commented Jul 27, 2014 at 7:28
my problem is that when I add the <h:form> tag the css does not work. what should I do? — Sina Barghidarian
– Sina Barghidarian, Commented Jul 27, 2014 at 7:32
In that case I think you made very specific declarations in your css. Try changing these, at least for testing purposes. For example add #usernameInput { border: 10px solid red; } — Menno
– Menno, Commented Jul 27, 2014 at 7:38

Jaqen H'ghar · Accepted Answer · 2014-07-27 10:47:49Z

2

Just to elaborate on BalusC's comment: After you add the form, JSF will prepend the id of the form to its children's id's, so the first inputText will now have id="loginForm:usernameInput" (as you can see with "show source" or similar in the browser).

Since this breaks the styling I expect you currently use the id for styling. Much better practice is to use the styleClass attribute instead. Also you would probably want to bind the inputText's to bean properties in the value attribute. Further suggestions are to use a p:panelGrid and a p:password for the password:

.usernameInput {
    ...
}
.passwordInput {
    ...
}

and

<p:panelGrid columns="2">
    <p:outputLabel id="usernameLabel" for="usernameInput" value="User name: " />
    <p:inputText id="usernameInput" styleClass="usernameInput" value="#{bean.username}"/>
    <p:outputLabel id="passwordLabel" for="passwordInput" value="Password: " />
    <p:password id="passwordInput" styleClass="passwordInput" value="#{bean.password}"/>
</p:panelGrid>

edited Jul 27, 2014 at 10:47

answered Jul 27, 2014 at 10:40

Jaqen H'ghar

4,3652 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sina Barghidarian Over a year ago

Thank you, it helped. I could also change the value of prependId of the form to false.

Jaqen H'ghar Over a year ago

Yes you are completely right, but I think it will still be better to use the class as its best practice. Btw you could also create your loginpage with a dialog like here, then it will be centered automatically: stackoverflow.com/questions/24314745/…

BalusC Over a year ago

Avoid prependId="false" in JSF2. It breaks ajax things. They should have made this JSF1+JSP specific feature deprecated in JSF2.

Collectives™ on Stack Overflow

how to properly use css in jsf?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related