ComboBox Value Overflow to Next Line

Question

I'm using the combox box to set values for parameters as follows:

However, you can probably already see what my problem is. The control cuts off the text with a "..." and the user cannot see the rest of the text and has no idea what he is selecting.

Unfortunately I have not found a way to move the remaining text to the next line (multi-line combo box). Is there any way of doing this? Or can you at least give me a "hack" to do this please?

This is how I currently produce the combo boxes:

 let comboBoxObj = new ComboBox({
                dataSource: thiss.measures,
                value: measureVal.Id,
                fields: {
                    text: 'Path',
                    value: 'Id'
                },
                placeholder: 'Select a measure',
                allowFiltering: true,
                filtering: (e) => {
                    let query = new Query();
                    query = (e.text !== '') ? query.where('Path', 'contains', e.text, true) : query;
                    e.updateData(thiss.measures, query);
                },
                change: () => {
                    updateParameter();
                }
            });

Sureshkumar P · Answer

Hi Franco, 
 
We suggest you use out tooltip component to show the full list overflow data instead of displaying the data into two lines.  
Please find the code example her: 




// initialize ComboBox component 
 let comboBoxObj: ComboBox = new ComboBox({ 
   //set the local data to dataSource property 
   dataSource: (data as any).countries, 
   // map the appropriate columns to fields property 
   fields: { text: 'Name', value: 'Code' }, 
   // set the placeholder to ComboBox input element 
   placeholder: 'Select a country', 
   // set the height of the popup element 
   popupHeight: '270px', 
   close: () => { 
     tooltip.close(); 
   }, 
 }); 
 comboBoxObj.appendTo('#country'); 
  
 //Initialize Tooltip component 
 let tooltip: Tooltip = new Tooltip({ 
   // default content of tooltip 
   content: 'Loading...', 
   // set target element to tooltip 
   target: '.e-list-item', 
   // set position of tooltip 
   position: 'TopCenter', 
   // bind beforeRender event 
   beforeRender: onBeforeRender, 
 }); 
 tooltip.appendTo('body'); 
  
 function onBeforeRender(args: TooltipEventArgs): void { 
   // get the target element 
   let listElement = document.getElementById('country'); 
   let result: Object[] = listElement.ej2_instances[0].dataSource; 
   let i: number; 
   for (i = 0; i < result.length; i++) { 
     if (result[i].Name === args.target.textContent) { 
       this.content = result[i].Name; 
       this.dataBind(); 
       break; 
     } 
   } 
 } 
 
 
Find the sample for display the tooltip for all the options: https://stackblitz.com/edit/y6j9o5  
 
Please confirm whether the above suggestion meets your requirement. If not, please revert us we will prepare the sample with list items line breaks and display in two line 
 
Regards, 
Sureshkumar P