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

Subscribe to this post

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,

Reply | Reply with quote

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

Reply | Reply with quote

CONTACT US

Desktop and mobile behavior of DropDownList component

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US