Skip to content

Pagination design problem #223

Open
tstar opened this Issue Aug 20, 2013 · 4 comments

2 participants

@tstar
tstar commented Aug 20, 2013

Hello!

I want to show a small problem with the design of the example screenshot.

pagination

This is a screenshot of an example http://datatables.net/release-datatables/examples/basic_init/themes.html in the Google chrome. It reflects very well the problem. Yes, I know how to fix it in this case, but it does not solve the global problem. The fact that the button "3" is above the "2", so the screenshot shows how the right edge overlaps the "2" when you click on it. I partially solved the problem by specifying "z-index: 1;" in the CSS properties of active button.

mypagination

But with animation effect it (smooth change of style), I'm still watching brief disappearance of right border at the button.

I think it would be possible to completely solve the problem in the DataTables code, raising the index of the active button and lowering it all inactive buttons on the hover event, clicking the buttons ...

It will be great if it was possible. While I'm thinking about self-realization javascript to solve the problem ..

@DataTables
Owner

Could you use :hover in CSS to raise the index as well? If that works I'll fold that into the latest jQuery UI integration CSS for DataTables.

@tstar
tstar commented Aug 20, 2013

Yes, I'm doing now, but it works if you do not use animation in my case transition: color .2s linear, background .2s linear, border-color .2s linear;

@tstar
tstar commented Aug 20, 2013

If I use the animation, the z-index is reset before the animation is complete. In javascript, we can raise the z-index and leave it in that condition. Reset to the initial state is possible only when another button becomes active.

@DataTables
Owner

I think for the z-index on :hover and :active I'm happy to commit that into the core. For z-index with animation, I'll not commit that in at this time. A plug-in can be used to provide it if you need it or use a little bit of css to add a bit of space between the buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.