OneUI/XPages Quick Tip

Have you used the XPages Extension Library Navigator control in your apps? If so, have you noticed how the top entry in the navigator doesn’t quite look right? You can also see this small UI niggle in the XPages Extension Library (ExtLib) Sample demo app. I noticed this when I was using the Application Layout control and placing a Navigator in the left/right column(s).

Here is what I am talking about in the XPages ExtLib:

Notice how the Home navigator link has it’s top cut off? Here is what it should look like (from an app I am working on):

Does that look a lot better to you? This is simple to fix. Go into the Style properties of the Navigator and simply add 5px margin:

You can also make this change with a style override in your apps style sheet if you would prefer. I hope that this helps you with perfecting your XPages UI work.

I am also going to explore to see if this is only the case when using the Application Layout control.


5 thoughts on “OneUI/XPages Quick Tip

  1. Steve Smillie

    I solved the problem by putting a separator above the first entry (then a matching one at the bottom). I found that makes it look at better as well,

  2. Mark Leusink

    This issue can also be solved by loading an additional CSS file (after loading all the OneUIv2.1 CSS files) that includes the following style:

    .lotusMenu ul, .portlet-menu ul {
    margin: 5px 0 0 0;

Comments are closed.