5 Replies Latest reply on Jan 14, 2013 2:38 PM by hdu

    Incorrect order of CSS resource inclusions

    vace117

      Hello.

       

      I'm seeing a problem with the way css inclusions are rendered in RF4.

       

      I have some css includes defined explicitly like this:

      {code}

      <h:outputStylesheet library="theme" name="AgriShareCustomStyles.css" target="head" />

      <h:outputStylesheet library="theme" name="NiftyCorners.css" target="head" />

      <h:outputStylesheet library="theme" name="AgriSharePrintStyles.css" media="print" target="head" />

      <h:outputStylesheet library="theme" name="LhsMenuStyles.css" target="head" />

      <h:outputStylesheet library="theme" name="FloatingMessageStyles.css" target="head" />

      {code}

       

      These are added to the view when the <h:head> is done rendering. Then there are the CSS resources required by richfaces components, defined by @ResourceDependency annotations. These are added to the view when the RF component is being added to the tree.

       

      So we end up with user-specific CSS rendered before RF CSS, which makes it impossible to override RF CSS properties.

       

      To add to my confusion, RF CSS is rendered before user-specific CSS if there is an error on the page (in FacesContext), so in that case my styles render correctly.

       

      Does anyone know where this re-ordering is happening, and why it's not happening all the time?

       

      Thanks,

       

       

      Val

        • 1. Re: Incorrect order of CSS resource inclusions
          lfryc

          Hi Val,

           

          this is already reported in RF-10973,

          you could vote for this issue and watch for the progress.

          • 2. Re: Incorrect order of CSS resource inclusions
            vace117

            Thanks, Lukas.

             

            I'm wondering though how you know that this is the same issue. The jira says nothing about inconsistent ordering of CSS resources...

             

            If it is indeed the same issue, then there is another workaround, which is a bit less intrusive than using !important.

             

            You can re-target the CSS resources to the body. Since all RF CSS resources go into the head, this ensures that they will precede the user specified ones.

            • 3. Re: Incorrect order of CSS resource inclusions
              nbelaevski

              Val,

               

              Have you tried placing user resources at the bottom of the page, not at the top?

              1 of 1 people found this helpful
              • 4. Re: Incorrect order of CSS resource inclusions
                vace117

                ok, I see what you mean. Then my <h:outputStylesheet/> tags would get processed by Facelets after the RF components, so everything would be added to head resources in the right order.

                 

                That's a good workaround.

                 

                I know that this is more of a JSF problem than RIchFaces, but do you know if there is a planned fix for this?

                 

                Thanks, Nick.

                • 5. Re: Incorrect order of CSS resource inclusions
                  hdu

                  Hi, sorry for revisting an old thread. I tried putting <h:outputStylesheet/> at the bottom inside <h:body/> but it is still outputing the richfaces resource stylesheets after my stylesheet:

                   

                  <h:body>

                  ...

                      <h:outputStylesheet target="head" library="stylesheet" name="theme.css"/>

                  </h:body>