feat(igxGrid): Handle % width for MCH. #7625
Conversation
VMihalkov
added
💥 status: in-test
| const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; | ||
| if (isPercentageWidth) { | ||
| this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth()); | ||
| this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth; |
There was a problem hiding this comment.
Why do you remove the feature columns width in this case? In this case the user will need to take into consideration the row selection column for example, because his defined 100% column widths will render a scrollbar.
There was a problem hiding this comment.
@skrustev When width is in % and the related flex styles are applied (flex-basis, min/max width etc.) they are resolved based on the whole container width. So the actual rendered element widths will be the column percentage width * the grid container width.
The previous calculation was wrong as it did not reflect the size of the % width elements as rendered in the DOM. This was not as apparent before since the calcWidth was only used for internal horizontal virtualization calculations. However since it now applies the size for mch header elements the misalignment between the header and content cells is more obvious (you can refer this test - 'Should calculate column width when a column has width in % and row selectors are enabled' , which reflects this scenario and shows the misalignment).
This should also fix the following scenario:
https://stackblitz.com/edit/angular-dba7e7?file=src/app/grid/grid-sample-selection/grid-selection.component.html
Where all columns have widths in % and due to the row selector the virtualization calculations are wrong and the last column is cut off.
There was a problem hiding this comment.
I see, I guess in the context that columns are sized based on the whole grid size and not scrollable area it is fine, since I saw that other features also treat it that way.
Related to #5486
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)