Dropdown TreeViewInput: container with the tree is only partial visible in the table

[Fluit]

Prerequisites

• [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [x] The issue still exists against the latest master branch of yii2-grid.
• [x] This is not an usage question. I confirm having gone through and read the documentation and demos.
• [ ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [ ] I have attempted to find the simplest possible steps to reproduce the issue.
• [ ] I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. create a tabularform with a treeviewinput widget
2. open the dropdown

Expected behavior and actual behavior

I created a tabularForm with a TreeViewWidget as input type:

TabularForm::widget([
        'dataProvider' => $dataProviderOnderzoeken,
        'formName' => 'Onderzoeken',
        // 'form' => $form,
        'checkboxColumn' => false,
        // 'actionColumn' => false,
        'attributeDefaults' => [
            'type' => TabularForm::INPUT_TEXT,
        ],
        'attributes' => [
            "id" => ['type' => TabularForm::INPUT_HIDDEN, 'columnOptions' => ['hidden' => true]],
            'taxonomie_id' => [
                'label' => 'Taxonomie',
                'type' => TabularForm::INPUT_TEXT,
                'columnOptions' => ['hidden' => true]
            ],
            'commentaar' => ['type' => TabularForm::INPUT_TEXT],
            'labels' => [
                'type' => TabularForm::INPUT_WIDGET,
                'widgetClass' => kartik\tree\TreeViewInput::class,
                'options' => [
                    'query' => $query,
                    // 'model' => $model,
                    // 'attribute' => 'labels',
                    'headingOptions' => ['label' => 'Categories'],
                    'name' => 'kv-taxonomie-' . md5(rand()), // input name
                    // 'value' => $values,     // values selected (comma separated for multiple select)
                    'asDropdown' => true,   // will render the tree input widget as a dropdown.
                    'dropdownConfig' => [
                        'input' => [],      // input form-field
                        'dropdown' => [],   // dropdown
                        'options' => [],    // dropdown wrapper container
                        // 'caret' => '',      // default: TreeViewInput::CARET
                    ],
                    'multiple' => true,     // set to false if you do not need multiple selection
                    'fontAwesome' => true,  // render font awesome icons
                    'rootOptions' => [
                        'label' => '<i class="fa fa-tree"></i>' . Yii::t('ao', 'select all'),  // custom root label
                        'class' => 'text-success font-italic ml-1',
                    ],
                    'options' => [
                        'class' => '',
                        // 'disabled' => true
                    ],
                ],
            'del' => [
                'type' => 'raw',
                'label' => '',
                'value' => function ($model, $key) {
                    return
                        Html::hiddenInput('Children[' . $key . '][id]', (!empty($model['id'])) ? $model['id'] : "") .
                        Html::a('<i class="glyphicon glyphicon-trash"></i>', '#', [
                            'title' =>  Yii::t('ao', 'Delete'),
                            'onClick' => 'delRowmuopo(' . $key . '); return false;',
                            'id' => 'muopo-del-btn',
                        ]);
                },
            ],
        ],
        'gridSettings' => [
            // Dropdown container is partialy visible, cut off by footer: 
            // solution: https://sevenspark.com/diagnosis/overflow-hidden 

            'floatHeader' => true,    //
            'floatFooter' => true,   // 
            'floatPageSummary' => true,
            // 'floatAfter' => true,
            'panel' => [
                'heading' => false,
                'type' => GridView::TYPE_PRIMARY,
                'before' => false,
                'footer' => false,
                'after' => Html::button('<i class="glyphicon glyphicon-plus"></i>' . Yii::t('ao', 'Add onderzoek'), [
                       'type' => 'button', 
                        'class' => 'btn btn-success kv-batch-create', 
                       'onClick' => 'addRowOnderzoeken()']),
            ]
        ]
    ])

This results in the following view:

How can the TreeView intiarly be visible?

• a possible solution could be to enable 'floatAfter' property?
• how change the bootstrap 4 classes?
• a Select2Widget can switch between top or bottom...

Help is really appreciated.

Environment

Browsers

• [x] Google Chrome
• [ ] Mozilla Firefox
• [x] Internet Explorer
• [ ] Safari

Operating System

• [x] Windows
• [ ] Mac OS X
• [ ] Linux
• [ ] Mobile

Libraries

• jQuery version:
• yii2-grid version: 2.0.44
• Bootstrap v4.3

Isolating the problem

• [ ] This bug happens on the demos page
• [ ] The bug happens consistently across all tested browsers
• [ ] This bug happens when using yii2-grid without other plugins.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.