Domino View design Part2: Freezing Column Headers

Views with more documents requires vertical scrolling to see the documents. When you scroll down, the column headers will disappear from the window view. Using CSS we can apply style to 'TH' tag to appear in the same position even when you scroll.

Steps:

1.Create a $$ViewTemplateDefault form

2.Create a DIV tag with name "ViewBody"

3.Embed a view or create a $$ViewBody field

4.End the DIV tag

5.Link to style.css in the Head event




6. Create a page with name "style.css" and paste the the css style tags

div#ViewBody {
width: 100%;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

div#ViewBody table th {
width: 100px;
background-color: lightblue;
position:relative;
top: expression(document.getElementById("ViewBody").scrollTop-1);
z-index: 10;
}



Note: by changing height parameter, you can control the height of the view display,
Also by changing the z-index, you can the change the column header starting position.

7. Open the view in web browser
If you scroll the view, you can see the column header is in static position.