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.

Published by Bruce Elgort

You’ll find this technology professor – an award-winning instructor at Clark College – working hard to inspire and challenge his students with meaningful web development and programming experiences. With a skinny vanilla latte (no foam) in hand, Bruce loves to tinker and test the boundaries of existing and emerging technologies, to then guide hungry minds through memorable, educational journeys to showcase with passion the ever-evolving innovations of society. An industry leader, Bruce is known for co-developing Elguji’s IdeaJam software, and is recognized by IBM as an ‘IBM Champion’ for being an innovative thought leader in cloud technologies.

5 thoughts on “OneUI/XPages Quick Tip

  1. 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. 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.

%d bloggers like this: