Make floating Banner, Title Bar and Place Bar in Application Layout control of Extension Library

div.lotusBanner {
	/* Class for Banner */
	position: fixed;
	width: 100%;
	height: 30px;
	z-index: 100;
	top: 0px;
	padding: 0 0px; /* Required for utility links to be displayed properly */
}

div.lotusTitleBar { 
	/* Class for title bar */
	position: fixed;
	width: 100%;
	top: 30px; /* Start after banner ends */
	height: 45px;
	z-index: 100;
}

div.lotusPlaceBar {
	/* Class for place bar */
	position: fixed;
	width: 100%;
	z-index: 100;
	top: 75px; /* Start after title bar ends (height of banner + height of title bar) */
	height: 40px;
}

div.lotusMain {
	/* Class for content */
	margin-top: 115px; /* Start after place bar ends (height of banner + height of title bar + height of place bar) */
}

div.lotusTitleBar .lotusTabs li a {
	/* Required for title bar links to be displayed properly */
	padding-top: 4px;
	padding-bottom: 10px;
}





The idea here is to make the Banner, Title Bar and Place Bar in Application Layout control of Extension Library floating so that if the user scrolls they remain static at top while the content scrolls. Just create a style sheet resource, put this CSS in it and add it to your resources in XPage. That's it!

I have tested it on Application Layout control without any customization of styles or banner image. So if you have, say a banner image of 100px height, then you would have to modify the CSS accordingly with 100px as height of "div.lotusBanner" and similarly for remaining classes.

The above CSS assumes that you have all Banner, Title Bar and Place Bar in Application Layout control. If you don't have Banner or Title Bar or Place bar you would have to modify the CSS accordingly.

Tested on Internet Explorer 9, Google Chrome 22 and Mozilla Firefox 16.

Cascaded Style Sheets
Naveen Maurya
January 23, 2013 8:45 AM
Rating
78

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



No comments yetLogin first to comment...