How to always show OneUI action buttons with a simple CSS trick

In this article I will show how your ExtLib Application Layout Control action buttons (OneUI) can remain on the page at all times with a simple CSS Trick.

The following was created using the Extension Library Application Layout control – with OneUI v2.1 using the silver theme.

Introduction

OneUI is a great, simple layout for a nice clean application layout without too much worry about CSS and other complicated design things. There are some nice examples on the OpenNTF site about using the OneUI layout. The http://xpages.info/XPagesHome.nsf/Home.xsp website uses the same layout and you can see for yourself how the top bars scroll out of the screen as you move down the page.

The buttons in the PlaceBar stay put as the page scrolls down – as the page gets larger this becomes more of a pain for the user to have to scroll back to the top to get to the Save button.

The desired effect

My requirement in modernizing my current R5 web based application was to keep the look and feel as close to the original frameset as possible. The buttons were in the top frame and therefore visible on the page at all times. Without wanting to revert back 15 years and use frames in the XPage I had to come up with a way to keep the buttons on the page at all times.

The initial look

The initial buttons look like this in the placebar – nothing spectacular to see here

Save and Cancel button
Save and Cancel button

 

Using what else – FireBug 

So I had to figure out first of all what the CSS was for the buttons and then if I could change them. Looking at the HTML in FireBug you can see that the buttons are in a DIV with two classes: .lotusPlaceBar and .lotusBtnContainer

Looking at the OneUI buttons in FireBug
Looking at the OneUI buttons in FireBug

 

Fixing the position

Fixing the position of the buttons is as simple as using “position: fixed” and then they stay in that place on the screen. I added some other styling to pad it a little, and move at away from the side of the screen like this

Fixing the button position
Fixing the button position

This is achieved by adding the following style to the XPage

		.lotusPlaceBar .lotusBtnContainer {
		    background: url("/xsp/.ibmxspres/dojoroot-1.6.1/dijit/themes/claro/images/titlebar.png") repeat scroll 0 0 #EEEEEE;
		    border: 1px solid #CCCCCC;
		    float: right;
		    padding-bottom: 0.3em;
		    padding-right: 0.3em;
		    padding-top: 0.3em;
		    position: fixed;
		    right: 20px;
		    z-index: 99999;
		}

There we have it – fixed buttons on the page

As you can see from the picture below – the buttons stay in exactly the same place on the screen as the user scrolls down the page

Buttons fixed in place
Buttons fixed in place

All the way to the bottom of the screen

All the way to the bottom
All the way to the bottom
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s