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

custom dropdown popup

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

1 Reply

CI Christopher Issac Sunder K Syncfusion Team 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 }; 

Please find the sample from below link 


Live Chat Icon For mobile
Up arrow icon