I seem to be having an issue with the pager links at the bottom of pages like, Admin -> Recent Hits!

The pagers start with <<first, then <previous, then they count the number of pages, 1,2,3,4,5...etc. then it finishes off with next> then last>>.

The problem I'm having is that when there are many pages, the pagers do not render at the end properly, instead of dropping down to the next row, they drop down about halfway and overlap the page numbers on the first row somewhere in the middle. Sometimes, "next" will be on line with the numbers and the, ">" will be cut off and dropped down, partially overlapping the numbers.

I've taken a look at the source-page to see if I could get an idea of what class this was to point me to the correct css. This is what I find in the source-page:

<div class="item-list"><ul class="pager"><li class="pager-first first"><a href="/admin/reports/hits" title="Go to first page" class="active">« first</a></li>
<li class="pager-previous"><a href="/admin/reports/hits?page=5" title="Go to previous page" class="active">‹ previous</a></li>
<li class="pager-ellipsis">…</li>
<li class="pager-item"><a href="/admin/reports/hits?page=2" title="Go to page 3" class="active">3</a></li>
<li class="pager-item"><a href="/admin/reports/hits?page=3" title="Go to page 4" class="active">4</a></li>
<li class="pager-item"><a href="/admin/reports/hits?page=4" title="Go to page 5" class="active">5</a></li>
<li class="pager-item"><a href="/admin/reports/hits?page=5" title="Go to page 6" class="active">6</a></li>
<li class="pager-current">7</li>

<li class="pager-item"><a href="/admin/reports/hits?page=7" title="Go to page 8" class="active">8</a></li>
<li class="pager-item"><a href="/admin/reports/hits?page=8" title="Go to page 9" class="active">9</a></li>
<li class="pager-item"><a href="/admin/reports/hits?page=9" title="Go to page 10" class="active">10</a></li>
<li class="pager-item"><a href="/admin/reports/hits?page=10" title="Go to page 11" class="active">11</a></li>
<li class="pager-ellipsis">…</li>
<li class="pager-next"><a href="/admin/reports/hits?page=7" title="Go to next page" class="active">next ›</a></li>
<li class="pager-last last"><a href="/admin/reports/hits?page=178" title="Go to last page" class="active">last »</a></li>
</ul></div>

It looks to me like an un-numbered list but I'm not quite sure how it ends up horizontally instead of vertically!

Any ideas of how to get this to drop down and start a second row instead of dropping down overlapping the first row?

Thanks much

Comments

jacine’s picture

jacine
she/her
Location New York
commented

This is the code in style.css that controls the pagers:

You could try reducing the padding/margins, and if that doesn't work, the font size...

/*------------------------------------------------------------------------
 * PAGERS
 *-----------------------------------------------------------------------*/
ul.pager {
  clear: both;
  margin: 15px 0;
}

.pager a, .pager a:visited {
  background: #fff;
  padding: 0.5em;
  border:  solid 1px;
  text-decoration: none!important;
}

.pager a:hover {
  padding: 0.5em;
  border: solid 1px;
}

.item-list .pager li {
  margin: 0 4px 0 0;
  padding: 0;
}

.item-list .pager li.pager-current {
  padding: 0.5em;
  margin:  0 4px 0 0;
  border: solid 1px;
}
linuxpowers’s picture

linuxpowers commented

Thanks Jacine...I played around with the margins but nothing changed. Then I commented out the padding settings and it worked. So I eventually tweeked the padding settings to the "hundreths"! 0.05em! Anything bigger than that, with double-digits all across, caused the overlapping.

I played around with css for quite a while before but never actually knew I could get into the "hundreths" before. :)

Thanks again!

By the way, do you know where the words, "first", "previous", "next" and "last" come from? JS maybe?

jacine’s picture

jacine
she/her
Location New York
commented
Status: Active » Closed (fixed)

Your welcome ;)

The text comes from the theme_pager() function. You can override it in template.php by copying and pasting the function in there, and naming it sky_pager instead of theme_pager. Then just change the text to whatever you want.

If you do this, you'll need to rebuild the theme registry, so Drupal can become aware that you've overridden the function and use it instead of the core one. If you use Devel, just clear the cache, otherwise, load the admin/build/modules page and that should do it.

Hope that helps.