GOOGLE ADS

среда, 27 апреля 2022 г.

Выпадающий список Bootstrap частично скрыт ячейками таблицы

скрытое выпадающее меню

Вот html для создания раскрывающегося списка:

<div class="btn-group pull-right elipsis-margin open">
<button type="button" class="btn btn-link btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-validation-status="ok">
<i class="fa fa-ellipsis-v fa-lg"></i>
</button>
<ul class="dropdown-menu">
<li><a href="#shareModal" data-toggle="modal" class="btn-action"><i class="fa fa-share fa-fw"></i>Share</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>Edit</a></li>
<li role="separator" class="divider"></li>
<li><a href="#unshareModal" data-toggle="modal" class="btn-action"><i class="fa fa-ban fa-fw"></i>Unshare</a></li>
</ul>

Этот div находится внутри тела таблицы. Понятно, что раскрывающийся список закрыт ячейками таблицы, но его z-позиция установлена ​​на 1000. Кажется, он должен отображаться правильно.

Любая помощь будет принята с благодарностью.


Решение проблемы

z-index будет работать только с элементом, для свойства position которого явно задано значение absolute, fixed или relative.

Попробуйте установить позицию раскрывающегося списка на одну из вышеперечисленных. Вам также может понадобиться сделать это и для таблицы.

Например:

.your-class {
position: relative;
}

Комментариев нет:

Отправить комментарий

Laravel Datatable addColumn returns ID of one record only

Я пытаюсь использовать Yajra Datatable для интеграции DataTable на свой веб-сайт. Я смог отобразить таблицу, но столкнулся с проблемой. В по...