When combining PageLength with FixedHeader, buttons are inactivated

When combining PageLength with FixedHeader, buttons are inactivated

bsdzbsdz Posts: 17Questions: 6Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • bsdzbsdz Posts: 17Questions: 6Answers: 0

    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.

This discussion has been closed.