9 Replies Latest reply on Apr 11, 2014 4:27 AM by Tadas Simonavicius

    rich:select render problem

    Giampiero Torrielli Newbie

      Hi,

       

      I have a UI problem on my application, using the rich:select component. (RichFaces 4.3.4 FInal)

       

      I have a rich:select component nested in a <div id="appContainer">, nested in another <div id="appBody"> that has <style> position: absolute; with the bottom attribute set.

      The <div id="appContainer"> has an height value, enough to make the vertical scrollbar to apper.

       

       

      In this situation, if :

      1. open the rich:select box and leaving it open
      2. scroll down the page with mouse wheel(Firefox, Chrome, Explorer) or moving the vertical scrollbar (Firefox, Chrome)

       

      You see that the list box of the rich:select component is detaching from the component. (see attached image)

       

      Does it is a richfaces bug?

       

      Thank you for any help.

       

      Here images, before and after the scrolling action

      beforeScroll.JPG

       

      afterScroll.JPG

       

      Code example

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:a4j="http://richfaces.org/a4j"
          xmlns:rich="http://richfaces.org/rich"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:ui="http://java.sun.com/jsf/facelets">
      
      
      <h:head>
          <style type="text/css">
      #appBody {
        border: solid 2px red;
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        left: 10px;
        right: 10px;
      }
      
      
      #appContent {
        border: solid 2px green;
        margin: 5px;
        height: 1500px;
        width: 100%;
        height: 1500px;
      }
      </style>
      </h:head>
      <body>
          <div id="appBody">
              <h:outputText value="Body DIV"></h:outputText>
              <div id="appContent">
                  <h:outputText value="Content DIV"></h:outputText>
                  <div style="height: 60px;"></div>
                  <h:form>
                      <h:outputLabel value="Bugged select: " />
                      <rich:select id="theSelect" maxListHeight="200px"
                          enableManualInput="true">
                          <f:selectItem itemLabel="zero" itemValue="0" />
                          <f:selectItem itemLabel="one" itemValue="1" />
                          <f:selectItem itemLabel="two" itemValue="2" />
                          <f:selectItem itemLabel="three" itemValue="3" />
                          <f:selectItem itemLabel="four" itemValue="4" />
                          <f:selectItem itemLabel="five" itemValue="5" />
                          <f:selectItem itemLabel="six" itemValue="6" />
                          <f:selectItem itemLabel="seven" itemValue="7" />
                          <f:selectItem itemLabel="eight" itemValue="8" />
                          <f:selectItem itemLabel="nine" itemValue="9" />
                      </rich:select>
                  </h:form>
              </div>
          </div>
      </body>
      </html>