CODEWITHSUNDEEP
htmlcss
jjech
jjech

Reputation: 133

dropdown stuck behind other elements despite z-index

If you click on the speciesSelector dropdown, you'll see that it's getting stuck behind other elements despite setting z-index.

I found several other questions with a similar issue, but none of the solutions I've found have fixed the issue in my instance yet.

const speciesTypes = ['Human', 'Android', 'Betazoid', 'Klingon', 'Ferengi', 'Tamarian'];

function multiSelectHeaderFilter() {
  var select = document.createElement("select");
  select.multiple = "multiple";
  select.id = 'speciesSelector';
  speciesTypes.forEach(species => {
    select.innerHTML += "<option value='" + species + "'>" + species + "</option>";
  });
  return select;
}

new Tabulator("#tabulator", {
  layout: "fitColumns",
  data: [{
    name: 'Geordi La Forge',
    species: 'Human'
  }, {
    name: 'Dathon',
    species: 'Tamarian'
  }, {
    name: 'Jean-Luc Picard',
    species: 'Human'
  }, {
    name: 'Worf, son of Mogh',
    species: 'Klingon'
  }, {
    name: 'Tasha Yarr',
    species: 'Human'
  }, {
    name: 'Data',
    species: 'Android'
  }, {
    name: 'Wesley Crusher',
    species: 'Human'
  }, {
    name: 'Jalad',
    species: 'Tamarian'
  }, {
    name: 'Lwaxana Troi',
    species: 'Betazoid'
  }, {
    name: 'Temba',
    species: 'Tamarian'
  }, {
    name: 'T\'Kuvma',
    species: 'Klingon'
  }, {
    name: 'Lore',
    species: 'Android'
  }, {
    name: 'Noonian Soongh',
    species: 'Human'
  }, {
    name: 'Darmok',
    species: 'Tamarian'
  }, {
    name: 'Reittan Grax',
    species: 'Betazoid'
  }, {
    name: 'Quark',
    species: 'Ferengi'
  }],
  headerSort: true,
  columns: [{
    title: 'Name',
    field: 'name',
    sorter: 'string'
  }, {
    title: 'Species',
    field: 'species',
    sorter: 'string',
    headerFilter: multiSelectHeaderFilter
  }, ],
});

document.multiselect('#speciesSelector');
.tabulator-table {
  z-index: 0;
}

.tabulator-header {
  z-index: 1000;
}

.multiselect-list {
  z-index: 1000;
}
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/mneofit/multiselect/styles/multiselect.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mneofit/multiselect/multiselect.min.js"></script>

<body>
  <div id="tabulator"></div>
</body>

Link to JSFiddle: https://jsfiddle.net/jjech/3th28pv0/89/

Upvotes: 2

Views: 1119

Answers (1)

Edvards Niedre
Edvards Niedre

Reputation: 700

Problem is with overflow: hidden;. Remove overflow: hidden; from <div class="tabulator-col tabulator-sortable"></div> and <div class="tabulator-header"></div>.

Basically add to your CSS:

.tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col {
    overflow: unset;
}

This styles should be added after other CSS imports in order to take effect. Make sure to place that CSS after all included CSS files.

const speciesTypes = ['Human', 'Android', 'Betazoid', 'Klingon', 'Ferengi', 'Tamarian'];

function multiSelectHeaderFilter() {
  var select = document.createElement("select");
  select.multiple = "multiple";
  select.id = 'speciesSelector';
  speciesTypes.forEach(species => {
    select.innerHTML += "<option value='" + species + "'>" + species + "</option>";
  });
  return select;
}

new Tabulator("#tabulator", {
  layout: "fitColumns",
  data: [{
    name: 'Geordi La Forge',
    species: 'Human'
  }, {
    name: 'Dathon',
    species: 'Tamarian'
  }, {
    name: 'Jean-Luc Picard',
    species: 'Human'
  }, {
    name: 'Worf, son of Mogh',
    species: 'Klingon'
  }, {
    name: 'Tasha Yarr',
    species: 'Human'
  }, {
    name: 'Data',
    species: 'Android'
  }, {
    name: 'Wesley Crusher',
    species: 'Human'
  }, {
    name: 'Jalad',
    species: 'Tamarian'
  }, {
    name: 'Lwaxana Troi',
    species: 'Betazoid'
  }, {
    name: 'Temba',
    species: 'Tamarian'
  }, {
    name: 'T\'Kuvma',
    species: 'Klingon'
  }, {
    name: 'Lore',
    species: 'Android'
  }, {
    name: 'Noonian Soongh',
    species: 'Human'
  }, {
    name: 'Darmok',
    species: 'Tamarian'
  }, {
    name: 'Reittan Grax',
    species: 'Betazoid'
  }, {
    name: 'Quark',
    species: 'Ferengi'
  }],
  headerSort: true,
  columns: [{
    title: 'Name',
    field: 'name',
    sorter: 'string'
  }, {
    title: 'Species',
    field: 'species',
    sorter: 'string',
    headerFilter: multiSelectHeaderFilter
  }, ],
});

document.multiselect('#speciesSelector');
.tabulator-table {
  z-index: 0;
}

.tabulator-header {
  z-index: 1000;
}

.multiselect-list {
  z-index: 1000;
}
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/mneofit/multiselect/styles/multiselect.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mneofit/multiselect/multiselect.min.js"></script>
<style>
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col
{
 overflow: unset;
}
</style>

<body>
  <div id="tabulator"></div>
</body>

Upvotes: 4

Related Questions