Make the search bar in the Application Layout control ‘sticky’

Introduction

I guess many of you have or are using the Application Layout control (depending on your willingness of coping with limitations) and use Bootstrap to ‘escape’ IBM’s oneUI theming. In the control you can set the fixedNavBar property to fixed (top, bottom, unfixed?) but basically this will just claim precious space on top of the screen, especially for mobile users.

In case you are using the Search option in the Application Layout control you will find that usefull and want to have it available always and in particular for smaller devices where scrolling back to the top takes a bit more effort. Since you are already using Bootstrap the rescue is in near reach…

Affix

The Affix plugin in Bootstrap allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them “stick” at a specific area while scrolling up and down the page.

The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.

Implementation in XPages

Since we are using the Application Layout control we need to take a different swing than the normal implementation.

JavaScript onClientLoad

First we will add an ID to the titlebar section and then we register the affix plugin for it:

<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[$(‘.applayout-titlebar’).attr(‘id’, ‘titleBar’);
$(‘#titleBar’).affix({
//in order to make it ‘sticky’ to the top…
offset: {top: 40}
});]]></xp:this.script>
</xp:eventHandler>

CSS Styling

With CSS we define the style properties for the applied affix class:

<head>
<style>
#titleBar.affix {
position: fixed;
top: 0;
width: 100%;
z-index:999;
background-color:white;
}
</style>
</head>

Done!

That was rather easy, right?!

Below is a sample when an XPage is loaded:

applaystate01

And here is a sample when you scroll down the page:

applaystate02

Happy development!

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