Combobox popup width auto

[Sandip Kumar]

Hi,

Can we set the popup width of combobox as per data ? By default its 100% of the input width.

My data is array of complex object for text and value and I want to set the popup width as per max string length of text.

And I am setting the dataSource property of combobox to instance of DataManager as :

(dataSource = new DataManager(myData)

Thanks & Regards,

Sandip Kumar

[Sevvandhi Nagulan]

Hi Sandip, 

Greetings from Syncfusion support. 

You can set the popupWidth as auto for maximum length.  Kindly refer the below code, 

[app.component.html] 

 

<ejs-combobox id='games' #local [dataSource]='sportsData' [autofill]='true' [fields]='localFields' [popupWidth]='width' [placeholder]='localWaterMark' 

              [popupHeight]='height'></ejs-combobox> 

[app.component.ts] 

     public width: string = 'auto'; 

Please find the sample below, 

Sample Link: https://stackblitz.com/edit/angular-v4ysa2-l3pwlp?file=app.component.html 

Please refer the below UG documentation, 

UG Link: https://ej2.syncfusion.com/angular/documentation/api/combo-box#popupwidth 

Regards, 

Sevvandhi N 

[Sandip Kumar]

Hi,

Can you please tell how to manage the width as per screen width. If data is more than screen width then what will be the behaviour of popup.

My desirable behaviour is popup should show the scroll.

Best Regards,

Sandip Kumar

[Sevvandhi Nagulan]

Hi Sandip,  

We would like to inform you that, while setting the popupWidth as auto, the popup width will be expand based on the maximum string length in the dataSource. We can set the scroller when the text content exceeds popup width using the below CSS code by applying the overflow property as visible to e-list-item class,  

 

    .e-ddl.customCss .e-dropdownbase .e-list-item {  

        overflow: visible;  

        width: 500px; /* Need to provide width based on the provided text length*/  

    }  

 

Please find the sample below,  

Sample Link: https://stackblitz.com/edit/angular-v4ysa2-yokkre?file=app.component.css  

Regards,  

Sevvandhi N