4

I have the same issue as presented here:

jQuery Datatables Column list rendering behind the jQuery Modal Dialog

I have a DataTables table inside a Bootstrap modal window, and I am trying to use the ColVis extension to DataTables to make the columns selectable. When I click the Show Columns button, which is visible on the modal, nothing appears. However, when I close the modal I find the column list with a checkbox for each column sitting behind the modal.

The ColVis selection panel needs to be visible on top of the modal and needs to come and go with the modal.

I have altered the z-index property in three places in the file ColVis.css, multiplying each by a factor of 10: 

div.ColVis_collectionBackground {
    background-color: black;
    /*z-index: 1100;*/
    z-index: 11000;
}

div.ColVis_collection {
    position: relative;
    width: 150px;
    background-color: #f3f3f3;
    padding: 3px;
    border: 1px solid #ccc;
    /*z-index: 1102;*/
    z-index: 11020
}

div.ColVis_collection button.ColVis_Button {
    background-color: white;
    width: 100%;
    float: none;
    margin-bottom: 2px;
}

div.ColVis_catcher {
    position: absolute;
    /*z-index: 1101;*/
    z-index: 11010;
}

(The original values are commented out.)

These alterations seem sufficient to me, but have had no effect. The z-index value of the Bootstrap modal is found in a file called bootstrap.css. Here is the class: 

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: none;
  overflow: auto;
  overflow-y: scroll;
}

Does anyone know what I need to do?

Community
  • 1
  • 1
Ellipsis17
  • 85
  • 1
  • 2
  • 10
  • 1
    I cant help you (unless you create a fiddle reproducing the problem) because we dont know the actual setup, but this sounds like a typical [**stacking order issue**](http://philipwalton.com/articles/what-no-one-told-you-about-z-index/). You have a lot of injected z-ordered elements going on here. Bootstrap modal has backdrop, besides the modal itself. Colvis has a backdrop, besides the menu itself. – davidkonrad Jul 23 '14 at 12:51
  • Can you solve it? I have the same problem – Martin Varta Jun 15 '18 at 10:18

1 Answers1

1

This is a z-index order problem.The old colVis extension is retired, try using colVis of buttons extension and if the problem still exists use the following code in your css:

 .dt-button-background {
   z-index: 1 !important;
  }
 .dt-button-collection {
   z-index: 2 !important;
  }
Reza Makvandi
  • 33
  • 7