выпадающий список застрял позади других элементов, несмотря на z-index - PullRequest
Новая
       0

выпадающий список застрял позади других элементов, несмотря на z-index

0 голосов
/ 17 февраля 2020

Если щелкнуть раскрывающийся список speciesSelector, вы увидите, что он застревает за другими элементами, несмотря на настройку z-index.

. Я нашел несколько других вопросов с похожей проблемой, но ни один из Решения, которые я нашел, исправили проблему в моем случае. 

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/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/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>

Ссылка на JSFiddle: https://jsfiddle.net/jjech/3th28pv0/89/

1 Ответ

1 голос
/ 17 февраля 2020

Проблема с overflow: hidden;. Удалите overflow: hidden; из <div class="tabulator-col tabulator-sortable"></div> и <div class="tabulator-header"></div>.

В основном добавьте в CSS: 

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

Этот стиль следует добавить после других импортов CSS, чтобы вступить в силу. Обязательно поместите CSS после всех включенных CSS файлов. 

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/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...