rich:select render problem
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 :
- 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>
