RichComboBox inside a scrollable div.

[Simit Kulkarni]

Hi everyone,
I am having a problem regarding rich comboBox and a div, as a parent to the table, which contains this comboBox.
eg -->
< div style="height: 200px; overflow:auto;">
< table>
<rich:comboBox id="someid" width="100px;"
directInputSuggestions="true">
<f:selectItem itemValue="1" />
<f:selectItem itemValue="2" />
</rich:comboBox>
</ table>
</ div>


Problem is, when I scroll the div, combobox leaves its position, as if its position is absolute and has z-index as -1. I didn't give any style. Still something weird is happing. Has any body faced such problem before? Please Help me out.

[Kavita Tipnis]

Hi Simit,

Welcome to JavaRanch, you can use code tags for your code snippets.
For your question, the rich faces combo box component is made up of an input and pop components.
So you have to define styles for both. But the easiest way out is to put the combo box in a panel and define style for the panel(if needed)
I am not sure why you have the comboBox inside a table, but try this out.
ex: (I have use a panelGroup component but you can use the rich:panel too)

<h:panelGroup>
      <rich:comboBox id="someid" width="100px;" directInputSuggestions="true"> 
          <f:selectItem itemValue="1" />
          <f:selectItem itemValue="2" /> 
       </rich:comboBox> 
</h:panelGroup>

[Simit Kulkarni]

Hi Kavita,
Thank you so much for your response and interest in this mail. I tried it putting inside a Panel also. Just give that panel, a fixed height, set style as "overflow:auto" or "overflow:scroll". And check out the Behaviour in IE7 or IE6.

For the use of Table, Panel is generally rendered as a div in HTML format. So, having table inside it, I thought, will be much controllable and even if use resize the window, Controls inside the cells of table won't leave their place or look wrongly aligned. Anyways, in case of table also, You have to add proper styles to achieve that, but in general, I used tables just to have some extra control over display.

[Simit Kulkarni]

Hello everyone,
Anyways I already found a work around for this problem. It seems that RichFaces have this problem, with repsect to combo box.

The solution is setting style attribute "position" of the Scrolling Container to "relative". ie. "position:relative".

This solves the problem. Now combo box scrolls with other contents inside a div.

Thanks to "Kalpana" for showing interest in this problem.

Bye