Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Minakshi Mitra Kundu
215
Items with long width in igx-drop-down list is not fully highlighted.
posted

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.

</igx-input-group>
          <igx-drop-down #dropDown [width]=" '250px' " [maxHeight]=" '200px' ">
                   <igx-drop-down-item *ngFor="let data of lookupData$ | async"  [value]="data" class="drop-down-item">
                    {{ data }}
           </igx-drop-down-item>
</igx-drop-down>
Parents
No Data
Reply
  • 720
    Offline posted

    Hello Minakshi,

    Thank you for contacting Infragistics Community!

    There has been already logged an issue regarding the same query in our GitHub repository. Although the issue is related to the igxSelect component, it internally uses the igxDropDown component, meaning that the issue is related to both of them. As you can observe this issue is already resolved and in case you’re using any of our currently supported versions (IgniteUI for Angular 10.2.x or 11.1.x) it shouldn’t be reproduced anymore.

    You can refer to the following sample I have prepared for you. As you can observe the long values get truncated and the selection styling is applied appropriately. Please have in mind that this is the intended behavior for long items as per specifications (the last point of the user stories).

    In case you want to display the entire content I can suggest the following approaches:

    • Displaying the whole content within igxTooltip when hovering over igxDropDownItem.
    • Implement custom dropdown component with help of the igxToggleDirective and the igxToggleComponent. This will give you opportunity to create a horizontally scrollable list of items. Please keep in mind that this has to be handled entirely on application level and it is out of the scope of Infragistics Support. However you can refer to the following sample for guidelines.

    Please let me know if you have any further questions.

    Best Regards,
    Martin Evtimov
    Associate Software Developer
    Infragistics, Inc.

Children