Colvisibility button with direct insertion on fixed position div does not show

gverni

I'm using a colvis button and i'm appending it to a DIV with position fixed. When i click the colvis button the column option list is shown behind the background so it cannot be clicked.

You can see it here https://codepen.io/anon/pen/ZjaWGJ

Strangely enough the zindex for the dt-button-collection is correct (i.e. 2002 which is greater than the button background z-index). Still the button are not displayed over the background.

Same issue can be reporduced setting the DIV with position=absolute AND z-index set to any value lower than 2000.

Anyone has the same issue?

gverni

I Actually found out what happened.

When you defined a div with position fixed (or position absolute with z-index) you are actually defining a new stacking context (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). In doing so the z-index property applies only to the specific stacking context. Since the button background belong to the root stacking context, and being the last element in the HTML flow, it always gets shown above the div.

I found a couple of workarounds, but they have other issues:

1. Define z-index for the "host" DIV greater than 2000. In this case the button will be displayed correctly above the background, but if the user click the button to close the column options buttons, then the next time the button is clicked the column options button appears and disappears (until the user click somewhere else in the page). I think the button state machine gets messed up.

2. Remove the button background using:

buttons: [
{
extend: 'colvis',
background: false
}

This has same issue as 1. If the button is clicked to close the column option buttons, then it gets in a messed up status.

I believe the correct way of implement this is either to place the column options buttons in the same stacking context as the button background (i.e. root context) or viceversa place the button background in the same stacking context as the button (this latter has some drawbacks though).

In any case, the strange behavior of the button described in 1 should be fixed to avoid issue when background is set to false