Jump to content

Error while using custom options to style renderPager()


fedeb
 Share

Recommended Posts

Hi,

I am trying to style the pager navigation bar based on a simple example I found on bootstrap:

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

The code I am using is the following:

<?php
    echo $entries->renderPager(array(
        'nextItemLabel' => "Next",
        'previousItemLabel' => "Prev",
        'listMarkup' => "<ul class='pagination'>{out}</ul>",
        'itemMarkup' => "<li class='page-item'>{out}</li>",
        'linkMarkup' => "<a class='page-link' href='{url}'>{out}</a>",
           'currentItemClass' => "page-item active",
    ));  
?>

which renders this result: the current page is not styled!

image.png.7d46d2ed66acc9a02837f8f447253646.png

If I run the original bootstrap example everything works fine, but not through the renderPager options. The problem seems trivial but since I am new to ProcessWire (also to web design) I cannot find it! My main reference is this one.

Thanks in advance!

 

Link to comment
Share on other sites

Open your dev tools and inspect the active element. Which CSS classes does it have? If it doesn't have "page-item active" then something is wrong.

If it has these classes, then maybe you need to use some different code for the bootstrap styling.

Maybe provide the HTML code, that is outputted in dev tools, so we can help you more

  • Like 1
Link to comment
Share on other sites

Hi, thanks for the response, already checking the html code outputted in dev tools was helpful:

<li class="page-item">
::marker
	<a href="/cluster/page10"><span>10</span></a>
</li>
<li class="page-item">
::marker
	<a class="page-link" href="/cluster/page11">11</a>
</li>

Page 10 (active page) vs Page 11 (non active).

The difference is that the class is only "page-item" even though I specified "page-item active" and that <a></a> doesn't have the class page-link. If I add this information manually from the dev tools the page is render as is supposed to. My guess is I am doing an error while defining the option vector but I don't know how to solve it.

Link to comment
Share on other sites

The problem is, that you forgot to insert the {class} placeholder in the itemMarkup option which inserts the active class to the active element.
It has to look like this 

<li class='page-item {class}'>{out}</li>

so that the active class can be added.

  • Like 1
Link to comment
Share on other sites

Thanks for the tip, in fact adding that line fixed the current item class. I misunderstood the use of the keyworkd {class}.

Still there is one last problem remaining which I couldn't solve: the <a href=...></a> of the current element does not have the class="page-link" even though the other elements have it.

I am trying to solve it myself but cannot manage to do it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...