Can you pls run this example in a standalone report (not in your project/framework) and see if this issue remains.

If it doesn't there could be some element/javascript/css in your project that conflicts with VisualQuery's dropdown, which is BootstrapMultiSelect control. We will help you to solve the conflict.

If this happens even with a standalone example let us know. Tks,

We can't replicate this issue with the online example:

https://www.koolreport.com/examples/reports/visualquery/visualquery/

Would you pls let us know exactly how to reproduce it, i.e which browser you used, which actions you performed. Tks,

Thanks a lot for your effort with providing the problem reproducing steps. It looks like it happens when your browser window height from the select input to window bottom is too short for the dropdown to appear below the select input.

In such cases the dropdown would appear above the select input. Once appearing the dropdown position would not be changed until it is hidden and shown again even if its list of options is changed by filtering.

We can confirm it is the default behavior of the select control (Bootstrap multiselect). If you want to disable it and force the dropdown to always appear below pls add the following attribute to all button/link elements with class "dropdown-toggle" in your report page:

<button class="btn btn-secondary dropdown-toggle" data-flip="false" ...

Since VisualQuery hasn't had an option for this attribute, you can try to run a small script after it's ready on client side:

VisualQuery::create(array(
            ...
            "onReady" => "function() {
                // console.log('visualquery ready');
                document.querySelectorAll('.dropdown-toggle').forEach(function(btn) {
                    btn.setAttribute('data-flip', false);
                });
            }",
));

Hope this works for your case. Tks,

Oh, I see your point. When a new select control is added we need to set its data-flip attribute as well. Pls try the following not perfect solution:

    VisualQuery::create(array(
            "name" => "visualquery1",
            ...
            "onReady" => "function() { // assuming visualquery1 is your VisualQuery name, otherwise replace it below
                console.log('visualquery ready');
                document.querySelectorAll('krwidget[widget-name=\"visualquery1\"] .dropdown-toggle').forEach(function(btn) {
                    btn.setAttribute('data-flip', false);
                });
                var addTableBtn = document.querySelector('#visualquery1-Tables button');
                addTableBtn.addEventListener('click', function() {
                    setTimeout(function() {
                        document.querySelectorAll('krwidget[widget-name=\"visualquery1\"] .dropdown-toggle').forEach(function(btn) {
                            btn.setAttribute('data-flip', false);
                        });
                    }, 500); // wait 0.5 second after multiselect is added to set its data-flip attribute
                });
            }" 

In the future versions of VisualQuery we will add more events for users to have more customization. Rgds,