When the width of an item in the igx-drop-down is exceeding the dropdown window the highlight is shifting to left. The more we scroll to right of an item the more highlight shifts to left. As per the expectation, the whole item should be highlighted as long as the item width will be.
Please suggest a fix for it.
Hello Minakshi,
Thank you for getting back to me!
After further investigation I can verify that the issue is resolved in any version above IgniteUI for Angular 10.0.0. Having this in mind in version 10.1.0 the fix is applied. However I suggest using the 10.2.x which is the currently supported IgniteUI for Angular 10 version.
As you can observe within the sample I have provided to you in my initial response by default when the value of the item is to long it gets truncated (ends with three dots and a right padding equals to the left one). Having this in mind I assume that you have applied additional styles in order to achieve the behavior in the provided screenshot. After further investigation of the provided screenshot I assume that you’re using the igxAutocomplete directive with async data as well.
Having this in mind I have prepared another sample for you. As you can observe the second column (Name) of the igxGrid contains an autocomplete dropdown which renders an async data. Some of the data entries have long names and the default truncating is applied. However if you place the cursor over them a tooltip will appear displaying the full name (the approach I have suggested in my initial response).
Please let me know if you need any further information.
Best Regards, Martin Evtimov Associate Software Developer Infragistics, Inc.
Yes, I went through the second sample which you have provided yesterday. It seems to be quite a big change from my side. Do I have to add handleSelection(), onCellEditEnter() and onCellEditExit() too? Can this issue be resolved in a simpler way by just adding a horizontal scrollbar?
Please note that the sample demonstrates a possible approach of providing an igxAutocomplete Component to an igxGrid cell when being in edit mode. As you can observe this is handled entirely on application level and there are multiple ways of achieving this. The reason I have provided this sample is to demonstrate a possible approach of showing the igxTooltip when hovering over the igxDropDown items. Please keep in mind that since this behavior is not provided out of the box it has to be implemented on application level as well (there are multiple ways of achieving this).
PS. As I have already mentioned, according to the igxDropDown Component’s specifications the long list items has to be truncated and a horizontal scrollbar should not appear. The issue I have mentioned in my initial response was related exactly to removing the horizontal scrollbars. Having this in mind in case you want to add such you have to implement it on application level. However, personally I do not recommend this approach.
As I have already mentioned, both behaviors of showing tooltips or introducing horizontal scrollbars are not provided out of the box and should be handled entirely on application level, which as stated in our policy is beyond the scope of Infragistics Support.
Best Regards,Martin EvtimovAssociate Software DeveloperInfragistics, Inc.
I’m glad that you find the provided information helpful.
Thank you for using Infragistics Components!
This fix working perfectly.
Thank you so much.
My bad that I have missed out some of the points, which you have already shared earlier. Yes, I will try out this code again and will get back to you by early next week.
Your effort is highly appreciated.