# Problem code `'host-unsized'`

> Contract 2.0.0 · package sha256 `a857eca95b35921109faf997094bb4192f12527d9d0fcd4be7e97f06425bad6e` · generated from `configurator-runtime.d.ts`, `tables/problems.json` and `services/onsite-scripter/scripts/contract-docs-what-to-do.json` by `services/onsite-scripter/scripts/build-contract-docs.mjs`; edit the source, not this file.

A member of [`ProblemCode`](../api/ProblemCode.md) · stable · since 2.0.0

`el` has no size to draw at: under 64 CSS px on a side, or not rendered (display: none on it or an ancestor), at the first drawn frame or a resize; once until it has a size again. A `div` with no CSS height is not unsized: it takes the view's default 2:1 shape ([`BootOptions.el`](../api/BootOptions.el.md)). Give `el` a CSS size for the shape you want, and show it.

## What to do

Give the boot element ([`BootOptions.el`](../api/BootOptions.el.md)) at least 64 CSS px on each side, and show it (no `display: none` on it or an ancestor), before or after boot: the runtime draws at its size, so a box under 64 px shows next to nothing and a hidden one nothing. A `div` with no CSS height is not this Problem: it takes the view's default 2:1 shape (360 × 180 for a 360 px wide `div`). Size it from your layout (`height: 60vh`, an aspect-ratio box) for the shape you want; the next resize arms the check again.

```ts
el.style.aspectRatio = '4 / 3'; // or a CSS rule: #viewer { width: 100%; aspect-ratio: 4 / 3 }
session.on('problem', ({ problem }) => { if (problem.code === 'host-unsized') console.warn(problem.message); }, { signal });
```

## Where the declaration names it

- [`BootOptions.el`](../api/BootOptions.el.md): With no CSS height it takes the view's default 2:1 height (360 × 180 for a 360 px wide `div`); under 64 CSS px on a side, or under `display: none`, it shows next to nothing and records 'host-unsized'.

The set is open: handle a code you don't know (`'other'`).