Setting Portlet Height and Scrolling

You can control the height of portlets and determine whether or not their contents scroll.

Portlet height and scrolling is controlled by the following CSS style attributes:

{overflow-y:auto} - Enables vertical (y-axis) scrolling
{overflow-x:auto} - Enables horizontal (x-axis) scrolling
{overflow:auto} - Enables vertical and horizontal scrolling
{height:200px} (where 200px is any valid HTML setting)

You can set these attributes on a portlet that is open in the Portlet Designer.

To set these properties:

Open a portlet in the the Portlet Designer.
In the Document Structure window, select Window Portlet.
In the Property Editor window, under Portlet Properties, set one of the following properties:

Content Presentation Style - Enter any of the previously listed attributes for this property. You can use overflow and height. Separate the values with a semicolon.
Content Presentation Class - Enter the name of a style sheet class that contains the height or scrolling attributes you want to use.

For example:

Where Content Presentation Style = {overflow-y:auto};{height:250px}

The result looks like the following figure:

Here is an example of using the Content Presentation Class property instead:

Content Presentation Class = portlet-scroll

In this case, you would have to have the following style class defined in a CSS file:

.portlet-scroll
{
    overflow-y:auto;
    height:250px;
}

Making All Portlets Scroll

To provide portlet height or scrolling automatically, you can also modify window.jsp in each skeleton to incorporate a CSS style or class. For example, in the default skeleton's window.jsp, do one of the following:

Replace the string bea-portal-window-content with the name of the scrolling portlet style class you created, such as portlet-scroll. (Be sure the CSS file containing the scrolling class is registered in the skin's skin.properties or skin_custom.properties files.)
In the last line of the JSP, change

style value="<%= window.getContentPresentationStyle() %>" />

to

style value="<%= window.getContentPresentationStyle() %>" defaultValue="{overflow-y:auto};{height:250px}" />

You could also simply modify the skin CSS style class. For example, in the skin's window.css file, define the bea-portal-window-content class like this:

.bea-portal-window-content
{

    margin: 4px;

    padding: 0px;

    scrollbar-base-color: #d8d8e5;
    overflow-y: auto;
    height: 250px;
}