how to properly use css in jsf?


Tags: css,jsf,jsf-2,primefaces

Problem :

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>



Solution :

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>

    CSS Howto..

    How to catch this nth-child() with css

    How to add dynamic CSS style sheet for single xhtml file

    How to apply css selector in ZK

    Need help understanding how to format inline CSS of Table data from a JS file

    How to CSS style angular directive?

    How to include CSS code directly in a php file

    How to positioning an element over another in CSS

    How to change the included CSS files on button click?

    How to change color of element when hovering over another element?

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    How to change active color of bootstrap button group to have different color for each button

    How to change the src of an iframe with css

    How can I make images fit into a 200 pixel square box using CSS?

    How to make these jquery pop ups fall back to css when javascript disabled

    how to handle spanish character for classname in CSS file?

    CSS and jQuery - how to force 2 rules to work together

    CSS Lining up images. Always 1px difference. Why/How?

    How can I style this php with divs?

    I can't get all the div's to show up with the same #id

    How do I keep a horizontal column of divs in the same row when it is extends past the screen?

    How to do formatting using CSS to table

    Determining if shown dates in a table are before today's date using jQuery

    How does CSS3 flexbox negative-flex work?

    Modernizr: how do I detect CSS display:table-cell support?

    How to dynamically add a class to li item and change its background color using javascript and css

    How to create a jQuery scroll to edit CSS?

    How can I disable inherit in CSS?

    how to load css for a div?

    How to make outer div fit child divs?

    how to select a input using jquery