We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Desktop and mobile behavior of DropDownList component

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,   


1 Reply

PO Prince Oliver Syncfusion Team March 6, 2019 07:13 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon