Jump to content

Pager: item classes override current item classes


froot
 Share

Recommended Posts

The $options array seems to be missing one crucial item, which is itemClass.

BTW I'm using tailwind css, in case the classes confuse you a bit.

I can't seem to style the <li> elements. If I add bg-green-400 to the classes of itemMarkup, it overrides the class of currentLinkMarkup.  

If I apply all the styling to the <a> tags instead, I cannot have a rounded corner for the first and last item.

$options = array(
  'listClass' => 'inline-flex',
  'linkMarkup' => "<a class='px-2' href='{url}'>{out}</a>",
  'currentItemClass' => 'bg-red-400',
  'itemMarkup' => '<li class="{class} h-auto hover:bg-red-400">{out}</li>',
  'separatorItemClass' => '',
  'currentLinkMarkup' => "<a class='px-2'>{out}</a>",
  'nextItemClass' => 'rounded-r-full',
  'previousItemClass' => 'rounded-l-full',
  'lastItemClass' => 'rounded-r-full',
  'firstItemClass' => 'rounded-l-full',
  'nextItemLabel' => '>>',
  'previousItemLabel' => '<<',
  'separatorItemLabel' => '<span>…</span>',
);

thanks for ideas!

Link to comment
Share on other sites

2 hours ago, fruid said:

The $options array seems to be missing one crucial item, which is itemClass.

An itemClass would accomplish the same as adding your class to itemMarkup. I'm not sure where exactly the problem lies, but you could test if adding your desired class before or after the {class} in itemMarkup solves the issue if it's a simple case of precedence within identically specific selectors.

  • Like 2
Link to comment
Share on other sites

2 hours ago, BitPoet said:

before or after the {class} in itemMarkup

I tried that, doesn't help. If I do that, all look non-active. Both classes appear in the markup but the second one, coming from {class} gets ignored. That's why I thought that by having an array-item called itemClass, only one would be inserted via {class} and the problem I reckon would be solved.

Link to comment
Share on other sites

Can you outline the desired and working HTML output you would need in your case?

Maybe not only the current item but a whole pagination block. That way it would be much easier for us (at leat me) to know and understand exactly where to look.

And... what about writing your own little CSS snippet for that case? 

Link to comment
Share on other sites

[SOLVED]

it actually started working for not good reason. I'm sure I tried before what I tried just now, but then it didn't work. 

Maybe by showing you the final code will clear things up

$options = array(
  'listClass' => 'inline-flex flex-center',
  'linkMarkup' => "<a href='{url}'>{out}</a>",
  'currentItemClass' => 'bg-red-400 text-white',
  'itemMarkup' => '<li class="bg-green-400 px-3 py-2 {class} h-auto hover:bg-red-400 hover:text-white ">{out}</li>',
  'currentLinkMarkup' => "<a>{out}</a>",
  'separatorItemClass' => '',
  'nextItemClass' => 'rounded-r-full',
  'previousItemClass' => 'rounded-l-full',
  'lastItemClass' => 'rounded-r-full',
  'firstItemClass' => 'rounded-l-full',
  'nextItemLabel' => '>>',
  'previousItemLabel' => '<<',
  'separatorItemLabel' => '<span></span>',
);

thanks

Edit: That said, what I don't like very much is the space between <a> and surrounding <li> tag which is not clickable but still changes its color upon hover. Hard to fix in this case at least.

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...