Monday, October 27, 2003

Portlet with a vertical scroll bar

To have a better control of the layout of your Portal Pages, you can use a vertical scroll bar in portlet wihout having to use iFrame technology. CSS provide us lof of power to do it.

1. Create a style in your portlet (or in the portlet container code):

<style>
.scrollportletId {
   height:200px;
   overflow: auto;
}
</style>
2. Use this style in a DIV section:
<div class="scrollportletId>
  The content of this section will be vertically scrollable.
</div>
3. The result looks like:
This is the content of my portlet with a vertical scroll bar. It is also interesting to notice that, the 'degraded' mode -on older browser- automatically works, by showing the complete content.
You can also if needed use more style attribute to have better control of the shape of the portlet or even on some browser the look and feel of the scroll bar it self.
width=80px;
    scrollbar-base-color:#FFFFFF;
 scrollbar-3dlight-color:#CFB29F;
 scrollbar-arrow-color:#CFB29F;
 scrollbar-darkshadow-color:#CFB29F;
 scrollbar-face-color: #FFFFFF;
 scrollbar-highlight-color:#E5E5E5;
 scrollbar-shadow-color:#E5E5E5;
 scrollbar-track-color:#CFB29F;
    

Sample Portlet.

1 comment:

Anonymous said...

Great post!!! It's very useful when we're creating portlets that generate tables, to have them not too much extended. Thank you. :)