rich:select render problem
amareno Oct 28, 2013 6:43 AMHi,
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 :
- open the rich:select box and leaving it open
- 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
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>