rich panel with scroll

[krikorherlopian]

<rich:layout  >
         <rich:layoutPanel width="55%" position="left">
                        
                             <rich:panel id="firstpanel">

                              <rich:tree>

                         </rich:tree>

                    </rich:panel>

     </rich:layoutpanel>

      <rich:layoutPanel width="45%" position="center">
                        
                             <rich:panel id="secondpanel">

                            /// output text and stuff

                         </rich:panel>

        </rich:layoutpanel>

</rich:layout>

I have this kind of form. I want to add a scroll do the first layoutpanel. When the tree is expanded the scroll to appear inside the first panel above

I dont want to the scroll to appear in the whole page.

The reason i want to get this working, because i dont want second panel to disappear from the users view.

[krikorherlopian]

I worked it out this way.

.rich-panel

        {

        height:85%;

        width:100%;

        overflow:auto;

        }

However it only works in mozzilla but not IE. In Ie I NEED TO Identify the width height by pixels for it to work.But I want to specify it by % , anyone has idea for this problem?    

[vishal3007]

You can do it like:

<style type="text/css">
  .body3 {
   height: 100px;
   overflow: auto;
  }
</style>

<rich:panel bodyClass="body3" style="width:200px;">
    <f:facet name="header">
     Scrolling regular Panel
    </f:facet>
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
    Long Text Long Text Long Text
   </rich:panel>