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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

custom dropdown popup

Thread ID:

Created:

Updated:

Platform:

Replies:

144496 May 9,2019 06:30 AM UTC May 10,2019 02:00 PM UTC Angular - EJ 2 1
loading
Tags: DropDownList
thowfik
Asked On May 9, 2019 06:30 AM UTC

how to use custom css for  dropdown popup so that i can change the dropdown popup to move left right top bottom or make center and also increase width of the popup etc

Christopher Issac Sunder K [Syncfusion]
Replied On May 10, 2019 02:00 PM UTC

Hi thowfik, 

Greetings from Syncfusion support. 

You can add the custom css classes to the root of the element by using the cssClass property. 
You can customize the height and width of the popup by using the popupHeight and popupWidth property 
Api Link: 

After rendering the will be opened in bottom only. The popup will be open at the top when popup component has not sufficient to space has to open.This is default behaviour of our component 

Please find the sample from below link 

You can align the popup with left,right and center by using the css styles. For example align the popup in left refer the following code snippet 
open: function(e) { 
    var changex = (listObj as any).inputWrapper.container.offsetLeft - parseInt(e.popup.width as string) 
    e.popup.position = { X: changex, Y: 0 }; 
    e.popup.dataBind(); 
} 

Please find the sample from below link 

Thanks,
Christo 


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

Live Chat Icon For mobile
Live Chat Icon