I have a page with the following struture
<rich:panel id="outerPanel" styleClass="mainPanel">
....
...some data present
<rich:panel id="innerPanel" styleClass="richPanelStyleClass">
<rich:dataTable styleClass="dataTableClass">
...
.....
</rich:dataTable>
</rich:panel >
..
...some data present
</rich:panel >
with the style class as below:
.mainPanel{
width:96%;
margin-left:5px;
overflow-x:auto;
overflow-y:hidden;
height:56.6%;
min-height:56.6%;
min-width:96%;
}
.dataTableClass{
background-position : top left;
background-repeat : repeat-x;
border-color : #BED6F8;
background-color: rgb(240, 240, 250);
width:99%;
height:100%;
}
.richPanelStyleClass{
height:68%;
min-height:68%;
min-width:99%
overflow-x:hidden;
overflow-y:auto;
width:99%;
margin-left:0px;
margin-right:0px;
border:0px;
}
The problem that i am facing is that i get scroll bar for the (i.e the second panel above the dataTable) innerPanel in IE7 whereas not in case of Firefox and Safari.
Thanks in advance.
When i give width in px in for richPanelStyleClass class i get the scrollbar in all the browser.
I tried replacing rich:panel with plain div scroll does not come for Firefox and Safari.