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

DropDown List

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

5 Replies

PO Prince Oliver Syncfusion Team April 30, 2019 10:03 AM UTC

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 

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

Regards, 
Prince 



SU sunithra April 30, 2019 10:26 AM UTC

Hi

Thanks for Reply.

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

Thanks in Advance.

Regards,

Sunithra.C


GG Gopi Govindasamy Syncfusion Team May 1, 2019 08:42 AM UTC

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.  


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.  



Regards,
Gopi G. 



SU sunithra May 9, 2019 06:15 AM UTC

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


CI Christopher Issac Sunder K Syncfusion Team May 10, 2019 10:34 AM UTC

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> 
 

Please find the sample from below link 

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 


Loader.
Up arrow icon