Prevent Drop Down List Fullscreen Popup for Blazor WASM

[Faiyaz]

https://www.syncfusion.com/forums/177317/prevent-drop-down-list-fullscreen-popup
I followed this, unfortunately was unable to achieve the result.
Previously I added the JS code in a script tag inside the index.html file. And added the required code inside the razor page. But it's not working.
How can I disable fullscreen pop up for dropdowns in wasm?

[Sureshkumar P]

Hi Faiyaz,

You can achieve your requirement by using the below code example.

[index.html]

 

function OnOpen(id) {

            setTimeout((id) => {

                if (browserDetails.isDevice) {

                    var parentElement = document.querySelector(".e-ddl.e-control.e-popup.e-ddl-device.e-popup-open");

                    parentElement.classList.remove(

                        'e-ddl-device',

                        'e-ddl-device-filter'

                    );

                    parentElement.style.width = parentElement.width;

                    parentElement.style.maxHeight = '220px';

                    parentElement.querySelector(

                        '.e-content.e-dropdownbase'

                    ).style.maxHeight = 220 - 25 + 'px';

                    parentElement.querySelector(

                        '.e-content.e-dropdownbase'

                    ).style.height = 'auto';

                    parentElement.ej2_instances[0].collision = { X: 'flip', Y: 'flip' };

                    parentElement.ej2_instances[0].position = { X: 'left', Y: 'bottom' };

                }

            }, 30);

        }

Find the modified sample with the latest source here:

Regards,

Sureshkumar P

Attachment: DDLWASM_31f71727.zip