Datatables открываются выпадающие внутри ячейки

Question

У меня проблемы с моим CSS, и я не нахожу проблему!

Внутри последней ячейки моих таблиц данных появляется выпадающее меню, которое щелкает по ней.

Проблема в том, что меню «остается» внутри ячейки и показывает мне скроллер!

Моя скрипка: http://jsfiddle.net/oxs8fp4e/1/

Это мой код для таблицы init, но проблема, я думаю, заключается в CSS темы, а не в таблице init:

myTable = $('#tabellaArticoli').DataTable({
    responsive: {
            details: {
                type: 'column',
                target: 0
            }
        },
        paging: true,
        "pageLength": 100,
        "lengthMenu": [ [20, 50, 100, -1], [20, 50, 100, "Tutti"] ],
        "info": false,
        scrollCollapse: false,
        scrollX: false,
        scrollY: false,
        "columnDefs": [
            {
                orderable: false,
                className: 'control',
                searchable: false,
                targets:   0
            },
            { "orderable": false, "targets": 1 },
            { "width": "5%", "orderable": false, "targets": 'azioni' }
        ]
  });

Вместо этого я хотел бы показать раскрывающийся список, как в этом примере: https://keenthemes.com/metronic/preview/demo7/crud/datatables/basic/basic.html

Может ли кто-нибудь помочь мне с моим css?

РЕДАКТИРОВАТЬ: я уже установил scrollX как ложь: это не проблема.Я думаю, что проблема только внутри CSS

Answer 1

Это почти та же проблема, что и в комментарии «возможный дубликат». Ваша таблица и один или несколько элементов обёртывания получили назначенный стиль overlow: hidden;.

В вашем случае вы можете сделать следующее, чтобы все всплывающее меню стало видимым.

1. удалить / переопределить стили overflow:

.table-responsive,
.dataTables_scrollBody {
    overflow: visible !important;
}

2. Изменить преобразование dropdown-menu -элементов, определенных встроенными стилями:

transform: translate3d(-120px, 20px, 0px);