Grid column size in % not calculating correctly when there is row selection

[MarielaTihova]

Description

When we want to set the width of each column in %, making the sum of all widths = 100%, we see the scrollbar, meaning that the grid is actually > 100% of the width. The reason about this is that when we have row selection or the expanding/collapsing for all rows option (for the hierarchical grid), there is a fixed space in pixels (different about each grid size (small/medium/large)) that is actually included in the container based on the width of which the percentage of each column is calculated.

• igniteui-angular version: 19.0.7
• browser: Chrome

Steps to reproduce

1. Use the grid/hierarchical-grid with the row selection enabled
2. Check the grid width. For example let's say it is 1000px
3. Add some columns. For example 4 columns each having width = 25% (=250px each)
4. Observe how the vertical scrollbar appears, showing that the width of the content we have is more than 100%. It is actually 1000px + the size of the column with the checkboxes for row selection

Result

The width of the content, even though it adds up to exactly 100%, is obviously more than that.

Expected result

Having columns add up to exactly 100% should NOT make the horizontal scrollbar appear. Instead the columns should fit perfectly in the space of the container. For this purpose though the % width should be calculated on a container that does NOT include any additional elements, like the row selection at the beginning of each row.

Attachments

In the screenshot below notice the scrollbar and how the last column is barely visible