Monday, May 30, 2011

Scrollable Lists

Requirement: Display a Prompts Pane and a List Pane. The list should display all rows in a single page with the capability to scroll. Note: the Prompts pane should remain visible to the users while scrolling down.

The simplest way to achieve the above requirement would be to use CSS. The advantage of providing scroll bars as part of the list is you can have other objects on the page still in user's visibility.


Step 1: Create a table with 2 columns. Add the required Prompts to Column 1 and the list object to Column 2. Set the height for the table cell in which you would like to place the scrollable list.

Step 2: Insert HTML items as shown below:

HTML 1: < div style="height: 100%; overflow: auto;" >

HTML 2: </div>

No comments: