[Grids] Minimum grid width for the horizontal scrollbar to appear is calculated wrong if there are mixed column minWidth

[RivaIvanova]

Description

Having columns with different minWidth causes the horizontal scrollbar to appear earlier than expected (when the grid's width is bigger than it should be).

<igx-grid
    [data]="data"
    [primaryKey]="'id'"
    [autoGenerate]="false"
    [height]="'300px'"
>
    <igx-column [field]="'value'" [minWidth]="'100px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'metric'" [minWidth]="'100px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'status'" [minWidth]="'100px'" [dataType]="'string'"></igx-column>
</igx-grid>

In the above, the columns have the same minWidth of 100px, so the grid's minimum width before the scrollbar appears should be 300px (100px+100px+100px).
When resizing the window, the grid reaches 300px and has no scrollbar. Then, when resizing a bit more so that the grid's width is below the minimum width, the scrollbar appears. This is the expected behavior.

However, if the minWidth is not the same for all columns, the total minimum width of the grid is not calculated as the sum of the individual column minWidth, but it applies the greatest minWidth for all columns and calculates the sum of that.

For example, in the below configuration, the total minimum width of the grid is again 300px (120px+90px+90px).

<igx-grid
    [data]="data"
    [primaryKey]="'id'"
    [autoGenerate]="false"
    [height]="'300px'"
>
    <igx-column [field]="'value'" [minWidth]="'120px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'metric'" [minWidth]="'90px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'status'" [minWidth]="'90px'" [dataType]="'string'"></igx-column>
</igx-grid>

However, the grid takes the greatest minWidth (120px) and applies it to all columns when calculating the minimum width (3x120px = 360px).

Another example:

<igx-grid
    [data]="data"
    [primaryKey]="'id'"
    [autoGenerate]="false"
    [height]="'300px'"
>
    <igx-column [field]="'value'" [minWidth]="'80px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'metric'" [minWidth]="'90px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'status'" [minWidth]="'130px'" [dataType]="'string'"></igx-column>
</igx-grid>

This does not prevent the columns from sizing to their designated minimum widths, but the window should be resized to be even smaller, and the scrollbar's scroll area gets bigger.

If not all columns have minWidth set, the default 136px value is used for the particular column. The below will set 136px as the minimum width for all columns when calculating the grid's minimum width, since 136px is greater than the other values.

<igx-grid
    [data]="data"
    [primaryKey]="'id'"
    [autoGenerate]="false"
    [height]="'300px'"
>
    <igx-column [field]="'value'" [minWidth]="'80px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'metric'" [minWidth]="'90px'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'status'" [dataType]="'string'"></igx-column>
</igx-grid>

• igniteui-angular version: 20.1.x, 21.0.x, master
• browser: any

Steps to reproduce

1. Use any of the above configurations, resize the browser window, and observe the columns.

Result

The horizontal scrollbar appears earlier than expected, when the grid's width should be wide enough to display all the columns.

Expected result

Same behavior when all the minWidth values are the same. The horizontal scrollbar should not appear when the grid is wide enough to display all columns.

[MayaKirova]

It's not exactly the fact that they are mixed but rather the fact that some apply constraint while some don't and the derived sizes do not recalculate accordingly afterwards.

When there are no widths the grid splits the available size equally between columns, so if it's 300px => 300/3 = 100px per column.

If we take this example:

    <igx-column [minWidth]="'120px'" ...
    <igx-column [minWidth]="'90px'" ...
    <igx-column [minWidth]="'90px'" ...

The first column needs to apply the constraint, since the default 100px is less than the min 120px. The rest don't hit the constraint (since 90px < 100px), hence they currently stay at 100px, causing the scrollbar to show.

Here's a similar setup:
https://stackblitz.com/edit/aegvxfkh

This one should be fixed with an additional recalculation after the constraints are applied, so that once it has determined that the first col needs to be 120px it can split the remaining space between the other 2.

But in regards to the last scenario:

    <igx-column [minWidth]="'80px'" ...
    <igx-column [minWidth]="'90px'" ...
    <igx-column ...

Since that last column has no size at all (no width, no constraints) it does have to default to 136px, as per the spec it cannot go below 136px:
https://github.com/IgniteUI/igniteui-angular/wiki/igxGrid-Specification#-column-sizing

So this one is expected as per the spec.

Also just as a side note - if there is some other feature that takes up space (like row selector or a vertical scrollbar) they can also cause the horizontal scrollbar to show. But that is the same behavior as when you set explicit width too. Isn't really related to the min-widths.