When combining PageLength with FixedHeader, buttons are inactivated

bsdz

Hi

I'm trying to use the PageLength and FixedHeader extensions together. I'd like to keep the pagelength menu button available along with a floating fixed header as one scrolls down a datatable view. The problem is that the drop down buttons for the pagelength menu seem to fall behind (like z-index) and one isn't able to click them, although they are visible.

I've put together a codepen example demonstrating the issue. Does anyone have any suggestions?

Thanks in advance
Blair

allan

Hi Blair,

Its a z-index layering issue. The background is z-index: 2001 while the buttons as 2002. But your dom_wrapper is only 1. Increasing it to 2003 resolves the issue: https://codepen.io/anon/pen/yZmJXr .

Oddly in Chrome it also makes the input element for the searchbox appear on top of the background though...

Allan

bsdz

Thanks that worked. I did try all sorts of z-indexes before and it didn't seem to help. In fact, I couldn't really even figure out the z-index of the buttons using chrome's dev tools. Although, now looking at it I see that's directly in the css file.