Aug 6, 2015, 9:59 AM
62 Posts

Why are my pagers lining up on the right?

  • Category: Extension Library
  • Platform: Windows
  • Release: 8.5.3
  • Role: Developer
  • Tags: pager align
  • Replies: 9

I have a new xPage with a view control.  I am adding pagerSizes and pagerExpand controls from the Extension Library.  Once added, they do function correctly, BUT they both show up right aligned.  They are crammed all the way to the right margin, and they are acting like I've put them into a narrow table column, like this:

 

Show

10

25

50

Items per page

Any idea why this is happening?  I have not aligned anything to the right, and even setting ALL fonts and margins to left alignment doesn't fix this.

Aug 6, 2015, 1:05 PM
110 Posts
What theme are you using?

In my experience, sometimes changing the theme to either one of the OneUI solve this kind of issues..

Aug 6, 2015, 2:36 PM
62 Posts
server default theme

Yep, that was what it wanted, the ONEUI theme.  And that's fine for the database I'm working on, but in most cases, I don't want the ONEUI theme. 

So, if I want to use these pagers in the future, I'm forced to use the ONEUI theme?

Aug 6, 2015, 7:06 PM
589 Posts
hmmm

You shouldn't need oneUI for the pagers...  I user them in bootstrap a lot.  Try nesting them in their own Divs/Panels...  That might help.

A little while back John Jardin did a video on styling a pager to look like bootstrap.  He does NOT require bootstrap.  He basically pulled out the needed CSS.  That might be interesting for you to look at.

 

http://johnjardin.ukuvuma.co.za/2015/06/24/video-tutorial-bootstrap-style-your-xpages-pager-control/

 

Good Luck!

Dave

Aug 7, 2015, 7:52 AM
62 Posts
need ONEUI for them to display properly

I do have them in a DIV.  But without the ONEUI theme, they display stacked with bullets, taking up way too much room on the screen, and just looking crappy.

I'll check out the video, thanks!

Aug 7, 2015, 7:52 AM
62 Posts
need ONEUI for them to display properly

I do have them in a DIV.  But without the ONEUI theme, they display stacked with bullets, taking up way too much room on the screen, and just looking crappy.

I'll check out the video, thanks!

Aug 7, 2015, 8:04 AM
589 Posts
umm

Are you using you're own theme?  If you're specifically avoiding oneUI...  you still almost certainly want to keep using "webstandard"...  any custom theme should really extend from webstandard for those controls...

 

 

Aug 9, 2015, 7:18 PM
453 Posts
When I use the Bootstrap Theme

The pager works fine and lines up nicely. I found that bootstrap sets a 10px top and bottom margin which is a terrible waste of space so added this to one of my css's and it works great. Now I have not tried it with the view control because I us repeat controls almost exclusively.

.pagination {
    margin: 0px;
}

.bootstrapPager {
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 12px;
}

Took me a fair bit of time to get everything set but I use plain jane <xp:pager in bootstrap and it works great. I think the video that David points to is for earlier releases using bootstrap4XPages I have found with the little over-ride above I don't really need to do much else with the standard pager in bootstrap. I find that OneUI says this is the way this control should look and if you don't like it tough. I have just finished converting my app from OneUI to bootstrap and am pretty happy with the result. 

 

Aug 11, 2015, 10:26 AM
62 Posts
using server default theme

I'm using the "Server default" theme, and my own CSS.  Thanks Bill, I'll add that bit of CSS to my style sheet and see if that helps.

Aug 11, 2015, 10:26 AM
62 Posts
using server default theme

I'm using the "Server default" theme, and my own CSS.  Thanks Bill, I'll add that bit of CSS to my style sheet and see if that helps.