Search code examples
cssjsfnetbeansxhtmlnetbeans-8

CSS does not work when I return to same page in JSF


I'm working in my final university project of this year using JSF and NetBeans 8.2. But I have a problem with css. When I login I save the category using this line:

 FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("categoria", cat);

That's work fine, I debug it. It's redirects me, to main page, for my category, in this case: image of page with css Then I press Main Menu button and It's redirects me to main page of my category Main menu botton and that's the error, the same page of first picture without css same page of picture one, without css. The links works fine, and the page have css, but the css does not working when I go back. Head of this main page:

  <h:head>
    <link href="../resources/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../resources/css/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <title>Gestionar Plan Anual Departamento</title>
    <meta charset="UTF-8"></meta> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
</h:head>

Sorry my English, thanks in advance.


Solution

  • The problem is with the tag: <link/>. This is not the correct tag for work with *.xhtml, the correct tag is: <h:outputStylesheet/>. Finally, I remplace

    <h:head>
    <link href="../resources/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../resources/css/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <title>Gestionar Plan Anual Departamento</title>
    <meta charset="UTF-8"></meta> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    

    By:

     <h:head>
        <h:outputStylesheet name="css/principal.css"/>
        <h:outputStylesheet name="css/bootstrap-4.3.1-dist/css/bootstrap.css"/>
        <title>Gestionar Plan Anual Departamento</title>
        <meta charset="UTF-8"> </meta>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    </h:head>