Scrollbar is visible all the time regardless of its content in Shor/Hide column

215

Minakshi Mitra Kundu posted over 3 years ago

After upgrading my app to Angular10 , I have noticed that a scrollbar is visible in the Show/Hide column dropdown regardless of its length.

In the below screenshot you can find that only 6 items are there and a scrollbar is not required as all are visible in the dropdown window still a scrollbar is appearing.

Top Replies

2680

Offline Bozhidara Pachilova posted over 3 years ago in reply to Minakshi Mitra Kundu +1 verified
Hello Minakshi, Thank you for the provided information. After further investigation, I was able to reproduce the scrollbar appearing in...view reply »

Parents

2680

Offline Bozhidara Pachilova posted over 3 years ago

Hello Minakshi,

Thank you for reaching out.

I have been looking into this and created a small sample with an IgxGrid and an IgxColumnHidingDirective to test against Angular version 10. On my side, I am not able to reproduce a scrollbar in the Column Hiding Dropdown when such is not needed.

Here you will find my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of your setup, please feel free to modify it and send it back to me along with steps to reproduce.

Additionally, I would like to ask if you are seeing this scrollbar in a certain browser. Also, is it possible that there are some styles in your project, that may be causing a scrollbar to appear in the dropdown?

Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

Thank you for your cooperation.

Looking forward to hearing from you.

Regards,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel
215

Offline Minakshi Mitra Kundu posted over 3 years ago in reply to Bozhidara Pachilova

Thanks for sharing the sample. Yes, I have added a min-height to reduce the extra spaces between the items. Before adding the min-height it was too long as you can see in the below image

I want this height to limit to a value and the scrollbar to appear only if required, which is not happening at all even after setting a minimal value to min-height.

Hope I could explain you my requirement.
Cancel
Reply

Cancel
2680

Offline Bozhidara Pachilova posted over 3 years ago in reply to Minakshi Mitra Kundu

Hello Minakshi,

Thank you for following up.

Before proceeding further, I would like to ask which version of Ignite UI for Angular your project is using. Were you referring to upgrading to Angular 10 or rather to Ignite UI for Angular version 10.0? I am asking this as there were breaking changes regarding the IgxGridToolbarComponent between Ignite UI for Angular 10 and 11. You could read more about them here.

As you can see, the sample I sent you is using Ignite UI for Angular version 11.1.4.

In this version, the IgxGridToolbarHidingComponent exposes a columnListHeight and columnsAreaMaxHeight properties, which can set the height of the column list and area. If the number of columns is such that not all of them can be displayed, a scrollbar will appear.

I would like to ask you how this min-height you are referring to is set and on which element? If I understand you right, your requirement is to minimize the space between the columns in the list, is this so? It would be very helpful if you could fork the sample I sent you and modify it in order to demonstrate your configuration.

Thank you for your cooperation.

Regards,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel
215

Offline Minakshi Mitra Kundu posted over 3 years ago in reply to Bozhidara Pachilova

I think columnListHeight and columnsAreaMaxHeight properties are not available in Ignite UI for Angular - 10.1.0 version.

I was setting min-height to igx-column-actions__columns-item element.
Cancel
Reply

Cancel
2680

Verified Answer
Offline Bozhidara Pachilova posted over 3 years ago in reply to Minakshi Mitra Kundu
Hello Minakshi,

Thank you for the provided information.

After further investigation, I was able to reproduce the scrollbar appearing in the column hiding dropdown when a min-height value, different from the default one is set for the “.igx-column-actions__columns-item” class. As you have probably seen, the default min-height is 3.25rem. Changing this value is most likely the reason the parent container’s height (a div with class “.igx-column-actions__columns”) cannot be properly calculated and a scrollbar appears even when not needed.

If you wish to keep the space between the column items slightly shrunk and avoid the scrollbar appearing, my suggestion is to implement one of the following approaches:

1. Shrink the space using the following properties rather than modifying the min-height. You can see a sample here:

igx-checkbox.igx-column-actions__columns-item { padding-left: 1rem; padding-right: 1rem; padding-top: 0; padding-bottom: 0; margin-top: -10px; margin-bottom: 0; }

2. Set a hardcoded height value for the parent div container (“.igx-column-actions__columns”) in addition to setting the min-height property, for example:

#columnHidingGrid igx-column-actions igx-checkbox.igx-column-actions__columns-item { min-height: 1.25rem; } #columnHidingGrid .igx-column-actions__columns { height: 200px; }

Here a grid with id “columnHidingGrid” is being targeted. In the case of more columns in the grid, a scrollbar will appear, while the dropdown height will always be 200px. You can test this approach in this sample.

If you require any further assistance on the matter, please let me know.

Sincerely,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Reject Answer

Cancel
215

Offline Minakshi Mitra Kundu posted over 3 years ago in reply to Bozhidara Pachilova

Thanks Bozhidara. Applying the first option of setting the paddings has reduced the gaps and now it look much compact and clean.
Cancel
Reply

Cancel

Reply

2680

Offline Bozhidara Pachilova posted over 3 years ago in reply to Minakshi Mitra Kundu

Hello Minakshi,

I am glad that you find this suggestion helpful. Thank you for using Infragistics components!

Best regards,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel

Children

No Data