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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Desktop and mobile behavior of DropDownList component

Thread ID:

Created:

Updated:

Platform:

Replies:

143126 Mar 5,2019 04:59 PM UTC Mar 6,2019 07:13 AM UTC React - EJ 2 1
loading
Tags: DropDownList
TOKO FIDELE
Asked On March 5, 2019 04:59 PM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;