Skip to content

Commit 2338ebd

Browse files
Copilotdamyanpetev
andauthored
docs(grids): remove null width guidance from sizing reference
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/f93e3aab-40e6-4d2c-97c0-4d3383a528c2 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
1 parent fdf40cf commit 2338ebd

1 file changed

Lines changed: 3 additions & 18 deletions

File tree

  • skills/igniteui-angular-grids/references

skills/igniteui-angular-grids/references/sizing.md

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,14 @@
1717

1818
The grid uses **border-box sizing** — border and padding are included in the width/height calculations. Do **not** override `box-sizing` on the grid element; doing so will break size calculations.
1919

20-
The grid supports both component inputs (`width`/`height`) and regular CSS/layout sizing from the host or wrapping container (including flex/grid layouts). Use the inputs when you need explicit grid sizing behavior such as `null` sizing that disables virtualization.
20+
The grid supports both component inputs (`width`/`height`) and regular CSS/layout sizing from the host or wrapping container (including flex/grid layouts). Use the inputs when you need explicit fixed or percentage grid sizing.
2121

2222
## Grid Width
2323

2424
> **Docs:** [Grid Sizing — Width](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#width)
2525
2626
**Default:** `100%` — the grid fills available width of the parent/window.
2727

28-
### `null` Width
29-
30-
```html
31-
<igx-grid [width]="null" ...></igx-grid>
32-
```
33-
34-
- All columns are rendered in the DOM — **column virtualization is disabled**.
35-
- Grid width expands to fit all column widths (minimum `136px` per column when no column widths are set).
36-
- No horizontal scrollbar inside the grid; the browser may render a native scrollbar if content overflows the viewport.
37-
- This is an edge-case mode intended when disabling column virtualization is desired; in layout-constrained containers (for example flex/grid wrappers), the expanding content width can break expected responsive sizing.
38-
- **Warning:** large column counts with `null` width can significantly impact browser performance due to no virtualization.
39-
4028
### Pixel Width
4129

4230
```html
@@ -117,7 +105,6 @@ html, body, .grid-container {
117105

118106
- Auto-sized columns share the available grid width equally.
119107
- Minimum column width is **`136px`**; if the equal share is less than `136px`, all auto-sized columns default to `136px` and the grid renders a horizontal scrollbar.
120-
- When grid `width` is `null`, auto-sized columns default to `136px` each.
121108
- Feature columns (row selector checkbox, etc.) consume space that reduces what is available for auto-sized columns.
122109

123110
```html
@@ -154,7 +141,6 @@ html, body, .grid-container {
154141
- Column width is calculated as a percentage of the grid width.
155142
- Responsive — resizes when the grid resizes.
156143
- Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar.
157-
- **If the grid `width` is `null`**, percentage column widths fall back to `136px` each — the grid has no base width to resolve against.
158144

159145
## Grid Cell Spacing Control
160146

@@ -211,9 +197,8 @@ igx-grid {
211197

212198
## Key Rules
213199

214-
- Grid sizing can come from CSS/layout context (host/container sizing) or from `[width]`/`[height]` inputs. Use `null` width/height only intentionally, because it disables virtualization.
200+
- Grid sizing can come from CSS/layout context (host/container sizing) or from `[width]`/`[height]` inputs.
215201
- **Never** override `box-sizing` on the grid — it uses border-box and relies on this.
216-
- Use `null` for width/height only when the data set is small; virtualization is disabled and large data will hurt performance.
202+
- Use `null` for height only when the data set is small; row virtualization is disabled and large data will hurt performance.
217203
- When using percentage height, the parent **must** have an explicit height for the percentage to resolve correctly. Without it, the grid falls back to 10 visible rows.
218-
- Percentage column widths combined with `width="null"` on the grid always fall back to `136px` per column.
219204
- A mix of fixed-width and auto-sized columns is valid — auto-sized columns fill the remaining space after fixed-width columns are laid out.

0 commit comments

Comments
 (0)