pagination "next" button with background-color error

comixene

Hello,

when I click the next button, it turns gray. So far, so good. If I now move the mouse away from the button, it stays gray, but should turn white. The back button works as it should.

kthorngren

Looks like you have customized the paging buttons. Are you using a paging plugin?

Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

comixene

yes, paging is customized. but without customazing its the same problem.
https://comic123.de/cr/

kthorngren

Thanks for the test case. That helps to understand the environment you have. This Datatables 1.13.10 with BS 3 example exhibits the same behavior. Possibly @allan can provide the steps need to have the next and previous buttons turn white when they lose focus.

Kevin

comixene

Thanks for the reply, kthorngren. I almost thought it was Bootstrap 3. I've now rewritten everything, without Bootstrap, just using datatables. That's solved the problem and works fine for me..
Speaking of which: on Codepen, everyone seems to have the same problem, it's just not that noticeable because the color difference is minimal. For example, this one: https://codepen.io/H700/pen/PorMGwJ

kthorngren

Could be differences in Bootstrap versions. The BS 4 example seems to work as you expect. However the BS 5 example behaves like BS 3. Or it could be differences in the Datatables style integration files for the various versions. Allan can provide more insight.

Also note that the current version of Datatables is 2.x. The support section states this about 1.x:

DataTables 1.x is now considered end-of-life. There will be patch releases if required, however, all development focus is on DataTables 2+ and no new features will be introduced to 1.x, nor backported.

Kevin

allan

The reason the button remains gray in this case is because it still has focus (if you hit tab on the keyboard you will see the focus shift automatically). Holding focus there is the correct thing to do for accessibility - that button does have focus, so it becomes a styling issue.

You could do:

.pagination > li > a:focus:not(:hover) {
  background-color: white;
}

Which would solve it.

I think I'm comfortable not overriding the styling library's default behaviour here - Bootstrap has styles for the focused button, which is what is being shown. I agree that it isn't quite the way I would prefer it to work (and the DataTables default styling doesn't), but its just part of the style.

Regarding the 1.x support statement from the blog post - I'll update that. I can't see 1.x getting a patch release for anything other than something totally catastrophic now - it is very unlikely to get a simple bug fix.

Allan