CODEWITHSUNDEEP
cssjsfjsf-2primefaces
Sina Barghidarian
Sina Barghidarian

Reputation: 478

how to properly use css in jsf?

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>

Upvotes: 0

Views: 492

Answers (1)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 4345

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>

Upvotes: 2

Related Questions