DropDown List

[sunithra]

Hi

In Dropdown List if the text in the dropdown list is bigger then, the popup should extend towards LEFT without the text hide .

I need to use mulitple dropdown in the same page/compoment.

Regards,

Sunithra.C

[Prince Oliver]

Hello Sunithra, 

Thank you for contacting us. 

We have checked your requirement to extend the popup size based on the item’s length. You can use the popupWidth property to the change the popup width based on the content length by setting it as auto. The popup will be displayed based text content. Kindly refer to the following code snippet. 

<ejs-dropdownlist id='games' #sample1 [dataSource]='sportsData' [fields]='localFields' [placeholder]='localWaterMark' [popupWidth]=width></ejs-dropdownlist> 

public width: string = 'auto'; 

We have attached a sample for your reference, Please find it in the following location 

Sample Link: https://stackblitz.com/edit/angular-roddyv-bkmwxn  

Let us know if you need any further assistance on this. 

Regards, 

Prince 

[sunithra]

Hi

Thanks for Reply.

I need to extend towards left not right [right side must be static ].

Thanks in Advance.

Regards,

Sunithra.C

[Gopi Govindasamy]

Hi Sunithra,  

We have checked your reported scenario and we suspect you have used RTL mode for text to display left to right. We have provided “enableRtl”, to enable the property the dropdownlist popup display right to left and right side text content is static. We have prepared test sample for your reference.  

https://stackblitz.com/edit/angular-roddyv-lc2tee?file=app.component.html  

If the above solution not meet your requirement means, we will provide another option to display the tooltip to show the all text. Please find the UG document and sample for your reference.  

Sample Link: https://stackblitz.com/edit/angular-roddyv-7tmcuq?file=app.component.ts 

UG: https://ej2.syncfusion.com/angular/documentation/drop-down-list/how-to/tooltip/  

Regards,
Gopi G. 

[sunithra]

Hi 

Thats working fine but only thing is that icon should come in the left side that is in the beginning.

Thanks in Advance.

Regards,

Sunithra.C

[Christopher Issac Sunder K]

Hi Sunithra, 

To place the icon at the beginning(left side) enable the “enableRtl” property to true. The “enableRTL” is used to display the component content in right to left. So, when we enable the property, icon will appear in left side. Please find the below code snippet, 

<ejs-dropdownlist id='games' #sample1 [dataSource]='sportsData' [fields]='localFields' [placeholder]='localWaterMark' [enableRtl]="true"></ejs-dropdownlist> 

 

API Link : https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#enablertl 

Please find the sample from below link 

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

If still this issue persists please share the below details that will help us to check and provide the exact solution at our end. 

1. Provide the Code snippet
2. Share the issue reproducing sample

Thanks, 

Christo