Pagination styling issue

[Michael Atul Kumar]

 Hello,

since this is my first post in the General Forum I want to take the chance to say thank you for Processwire. I really like what all of you have done so far and it makes backend development fun again .

Now to the main topic. I attached a screenshot of how my paging is rendered, using the Pagination module. The issue is the spacing between my li tags. I want to achieve a 1px margin between them. Right now they are inline block with margin set to 0. Still I get the spacing. So the problem must be that the html which is rendered by the module is "pretty printed" So after each li there is a line break and some tabs. The space is actually is a "text space" if u will, an therefore now chance for me to get rid auf that space with css.

Any tips on how to get around that?

Cheers

[Martijn Geerts]

The problem is likely rendering of whitespace.

When there's a space, a line-break or a multiple of white-space characters between the tags and the HTML tags are displayed inline (display: inline / display: inline-block / ) , a +/- 4 pixel whitespace is rendered. You could, make your own markup leaving out those white white-space characters.

If you removed all whitespace between <ul> and all <li>

You could add text-align: center to the UL, and set the <li> to inline-block. 

[LostKobrakai]

There is a way around this. 

Either remove all whitespace characters from the pagination string you get. 

$out = $list->renderPager($options);
$out = str_replace(array("\n", "\t", "\r"), "", $out);

This should work as long as there aren't real spaces between the tags.

The raw css way of preventing the space would be this:

ul{
  font-size: 0;
}

li{
  font-size: 16px;
}

[Martijn Geerts]

@LostKobrakai, I love that last solution

[LostKobrakai]

I don't It prevents proper propagation of font size changes and therefore isn't perfect if you want to maintain a flexible css base.

Edit:

If someone wants to use the php way, but still maintain the pretty print. One could also mask the whitespaces in html comment tags via a preg_replace.