How to control list position with scroll bar and “freeze” the list header

Check list of all posts

Problem
When developing interactive report, it is best to keep your data list within a predefined area. The default page up and down function destroys the interactivity, as all other contents will be disappeared when moving to second page.

Solution

Make two lists, the one list show column title, while the other one shows column body. Put the list with body into a block with scroll bar.

Please download report specification for detail

Implementation

Step 1: Create two queries with the same columns called qLTitle, qLBody, while qLTitle with filer 1=2 to return no data

Step 2: put lists together as below, the one ListTitle with qLTitle, the other ListBody with qLBody , and set the title hidden for ListBody


Step 3: give the block desired size and make sure block overflow property is set to use scroll bars only when necessary and then put ListBody into this block

Step 4: Make size consistent between ListTitle with ListBody by simply highlighting same column and defining the same size, while make block 40 pixes more for scrollbar.