Desktop and mobile behavior of DropDownList component

[TOKO FIDELE]

Hello. 

I work on the dropdown list component. In mobile mode and desktop this component opens differently. 

Rendered in desktop mode :

Rendered in mobile mode :

Is it possible to have desktop mode rendering in mobile mode ?

Thanks in advance and regards,   

[Prince Oliver]

Hi Toko, 

Thank you for contacting Syncfusion support. 

We have provided support for mobile mode in DropDownList which allows the popup to open full screen. This is the control’s default intended behavior. If you need to modify this, then you need to bind the open event for the control and alter the popup’s settings for mobile mode. Kindly refer to the following code. 

this.onOpen = (args) => { 

    if(Browser.isDevice){ 

        args.popup.element.classList.remove('e-ddl-device', 'e-ddl-device-filter'); 

        args.popup.element.style.width = args.popup.width; 

        args.popup.element.style.maxHeight = parseInt(this.popHeight) + 'px'; 

        args.popup.element.querySelector('.e-content.e-dropdownbase').style.maxHeight = parseInt(this.popHeight) - 25 + 'px'; 

        args.popup.element.querySelector('.e-content.e-dropdownbase').style.height = 'auto'; 

        args.popup.collision= { X: 'flip', Y: 'flip' }; 

        args.popup.position = { X: 'left', Y: 'bottom' }; 

        args.popup.dataBind(); 

    } 

}; 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/react-vb2rzj-by2lts  

Please let us know if you need any further assistance on this. 

Regards, 

Prince