Floating toolbar / actionbar / buttonbar in XPages?

Question

Does anyone have a floating toolbar for xXages similar to the action bar in Lotus Notes client?

I would like the toolbar to stay at the top of the browser while the browser is scrolled.

The extension pages toolbar looks really nice but first it only does client side code and it does not appear to float.

Answer 1

Float is something you can do using CSS and the following:

position: fixed;
top: 0;

For the XPages Extension Library xe:toolbar control you need to use override the following style class in your custom style sheet:

.tundra .dijitToolbar {
  position: fixed;
  top: 0;
}

And then you have a floating toolbar that stays at the top of the window when the user scrolls.

The xe:toolbar does server-side code too since it uses TreeNodes and the onItemClick event where you can add server-side code.

Answer 2

Thanks already came up with pretty much the same answer. Here is a CC.

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>
    <xp:styleSheet href="/PNC001.css"></xp:styleSheet>
</xp:this.resources>
<xp:panel id="toolbar" styleClass="PNCToolBar">

    <xp:callback facetName="ButtonBar" id="callback1"></xp:callback>
</xp:panel>

CSS

.PNCToolBar {
position:fixed;
top:0px;
left:0px;
width:100%;
height:46px;
color:#fff;
background:#F2F2F2;
padding-top:6.0px;
padding-left:15.0px
 }