At the first and last nodes, either 'previous' or 'next' is omitted, and so there are only two items shown instead of three.
This makes the default layout (on Garland, for example) skewed to one side and it looks pretty ugly.

Possible solutions:
- return   instead of empty string (a bit hacky; some themers may well rely on resting for an empty string)
- use display: inline the same way as the core pager
- instead of floating everything left, float prev and next left and right and put the counter in the middle

Comments

mcsolas’s picture

mcsolas commented

I agree.

I noticed this layout gotcha when working with the pagers and am also interested in a fix.

I like the buttons to show in a relatively predicable fashion.

If someone can help me figure out the relevant snippet of markup that lays this area out, maybe we can work on a fix to the markup. cant be a major change.

steve hanson’s picture

steve hanson commented

Try this - it works pretty well for me

ul.custom-pager {
margin: 0;
padding: 0;
text-align: center;
}

ul.custom-pager li {
margin: 0;
padding-left: 10px;
padding-right: 10px;
display: inline;
list-style-type: none;
list-style-image: none;
background: none;
white-space: nowrap;
}

john.kenney’s picture

john.kenney commented

#2 didn't work for me. i came up with this which works nicely. keeps previous / next locked in place from beginning to end.

the key was realizing that empty li's had 0px height, so effectively had no size. adding height=20px started me down right path. rest is just personal preference.

i went with 

ul.custom-pager  {
  margin: 18px 0;
  text-align: center;
}

ul.custom-pager li {
  width: 179px !important;
  height: 20px;
}

ul.custom-pager li.previous {
  float: left;
  text-align: left;
  padding-left: 15px;
}

ul.custom-pager li.next {
  float: right;
  text-align: right;
  padding-right: 15px;
}
mcsolas’s picture

mcsolas commented

Very nice.

I applied the #3 css patch and it works great.

Thank you for posting!!

john.kenney’s picture

john.kenney commented

oh, very good. happy to be of help.

you probably caught this, but to use this in the general case you need to make a couple changes.

i just set up on another site with much wider pages and had to fiddle with it a bit. problem is that padding of 15px is not the same percentage on a wide page as it is on a narrow one.

i think the following might be a better general case solution.

ul.custom-pager  {
  margin: 18px 0;
  text-align: center;
}

ul.custom-pager li {
  width: 32% !important;
  height: 20px;
}

ul.custom-pager li.previous {
  float: left;
  text-align: left;
  padding-left: 2%;
}

ul.custom-pager li.next {
  float: right;
  text-align: right;
  padding-right: 2%;
}

this should always produce elements that take up exactly 100% of available page width: 3 li's @ 32% + 2 paddings @ 2%.