0 Replies Latest reply on Nov 25, 2010 10:00 AM by Jochen Mueller

    rich:colorPicker corrupted - missing css 'style' attribute

    Jochen Mueller Newbie

      Hi!

       

      I'm developing a web app on JBoss with JSF 1.2, RichFaces 3.3.3 Final together with the latest version of OpenFaces (unfortunately RichFaces doesn't provide a tree table yet) and facelets as rendering engine.

       

      I had some problems with corrupted css styles wich destroyed the UI in several ways. I was able to eliminate those problems by setting some parameters in the web.xml:

       

          <!-- Change the way css and java script files are loaded. -->
          <context-param>
              <param-name>org.richfaces.LoadStyleStrategy</param-name>
              <param-value>ALL</param-value>
          </context-param>
         
          <context-param>
              <param-name>org.richfaces.LoadScriptStrategy</param-name>
              <param-value>ALL</param-value>
          </context-param>
         
          <!--  If you use LoadScriptStrategy ALL, turn the compression off  -->
          <context-param>
              <param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name>
              <param-value>false</param-value>
          </context-param>
         
          <!--  Facelets tuning -->
          <context-param>
              <param-name>facelets.DEVELOPMENT</param-name>
              <param-value>false</param-value>
          </context-param>
         
          <!--
              When a page is requested, what interval in seconds should the compiler check for changes.
              If you don't want the compiler to check for changes once the page is compiled, then use a value of -1.
              Setting a low refresh period helps during development to be able to edit pages in a running application.
           -->
          <context-param>
              <param-name>facelets.REFRESH_PERIOD</param-name>
              <param-value>-1</param-value>
          </context-param>

       

      With these changes the UI problems are solved until one remaining problem:
      In the web app there is a modal panel having a colorPicker inside. When the modal panel is opened for the first times after the application server start (JBoss 4.2.3 GA), the color picker is totally corrupted: see attachment "colorPicker_broken.png".
      The only workaround is to reload the whole page pressing Ctrl+F5 (in Firefox). After the reload is finished the color picker is OK: see colorPicker_ok.png.

      The next times when I enter the application and open the editor everything is fine.

       

      I compared the resulting html code of the modal panel and I found reason why the picker is corrupted in one case: the style attribute in the rich-color-picker-wrapper div-tag is missing!


      Correct:
      <div class="rich-color-picker-wrapper" id="elementEditorForm:elementColorPicker-colorPicker-popup" style="visibility: visible; left: 376px; top: 93px; display: block;">

       

      Broken:
      <div class="rich-color-picker-wrapper" id="elementEditorForm:elementColorPicker-colorPicker-popup">

       

      But I can't figure out the problem that leads to this error. Why is the style attribute missing!?

      Does anybody have an idea how to solve this?

       

      Thanks!