Pager: item classes override current item classes

[froot]

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!

[BitPoet]

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.

[froot]

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.

[wbmnfktr]

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? 

[froot]

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