angular/components · error

Invalid value "${this.fixedRowHeight}" set as rowHeight.

Error message

Invalid value "${this.fixedRowHeight}" set as rowHeight.

What it means

When rowHeight is a fixed value (not a ratio like '1:1'), FixedRowStyler.init normalizes it and validates it against a CSS calc()-safe pattern. Any string that isn't a plain number or a valid CSS length unit (px, vh, em, etc.) is rejected with this error.

Source

Thrown at src/material/grid-list/tile-styler.ts:184

/**
 * This type of styler is instantiated when the user passes in a fixed row height.
 * Example `<mat-grid-list cols="3" rowHeight="100px">`
 * @docs-private
 */
export class FixedTileStyler extends TileStyler {
  constructor(public fixedRowHeight: string) {
    super();
  }

  override init(gutterSize: string, tracker: TileCoordinator, cols: number, direction: string) {
    super.init(gutterSize, tracker, cols, direction);
    this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);

    if (
      !cssCalcAllowedValue.test(this.fixedRowHeight) &&
      (typeof ngDevMode === 'undefined' || ngDevMode)
    ) {
      throw Error(`Invalid value "${this.fixedRowHeight}" set as rowHeight.`);
    }
  }

  override setRowStyles(tile: MatGridTile, rowIndex: number): void {
    tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
    tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
  }

  override getComputedHeight(): [string, string] {
    return ['height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)];
  }

  override reset(list: TileStyleTarget) {
    list._setListStyle(['height', null]);

    if (list._tiles) {
      list._tiles.forEach(tile => {
        tile._setStyle('top', null);

View on GitHub (pinned to 0411926e7d)

Solutions

1. Use a number (rowHeight="100") or a valid CSS unit string (rowHeight="100px").
2. Use a ratio string like rowHeight="1:1" if proportional sizing was intended.
3. Sanitize user/config-provided values with a regex like /^\d+(px|em|rem|vh|vw)?$/ before binding.
4. Log the offending value and check for invisible characters (non-breaking spaces) from copied strings.

Example fix

// before
<mat-grid-list cols="3" rowHeight="100pixels">
// after
<mat-grid-list cols="3" rowHeight="100px"></mat-grid-list>

const cssCalcAllowedValue = /^-?\d+(\.\d+)?(px|%|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|ex|ch|fr)?$/;
function isValidRowHeight(v: string): boolean {
  return cssCalcAllowedValue.test(v) || /^\d+(\.\d+)?:\d+(\.\d+)?$/.test(v);
}

function isFixedRowHeight(v: unknown): v is `${number}px` | `${number}` {
  return typeof v === 'string' && /^-?\d+(\.\d+)?(px)?$/.test(v.trim());
}

When it happens

Trigger: Passing [rowHeight]="'100pixels'" or other invalid units, an empty/whitespace string, or a value like '10 0px' to <mat-grid-list rowHeight="...">; also passing an un-normalizable type that stringifies oddly.

Common situations: Typos in units ('pxx', 'px '), forgetting the unit entirely is OK (number) but suffix typos are not; binding a locale-formatted string like '100 px' with a non-breaking space; user-supplied config values flowing into rowHeight unchecked.

Related errors

• mat-grid-list: invalid ratio given for row-height: "${value}
• mat-grid-list: must pass in number of columns. Example: <mat
• Could not find tile at given position.
• mat-grid-list: tile with colspan ${tileCols} is wider than g
• xPosition value must be either 'before' or after'. Exa

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/173bcb25697ef049. Report an issue: GitHub.