Skip to content

Commit 223ed4f

Browse files
docs: Add note for dimension bindings. (#634)
* Update index.md * Update apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md * explain implementation --------- Co-authored-by: Rich Harris <[email protected]>
1 parent d1ce56d commit 223ed4f

File tree

1 file changed

+3
-1
lines changed
  • apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions

1 file changed

+3
-1
lines changed

apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Dimensions
33
---
44

5-
You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element:
5+
You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element, and Svelte will update the bound values using a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver):
66

77
```svelte
88
/// file: App.svelte
@@ -13,3 +13,5 @@ You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bind
1313
```
1414

1515
These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element.
16+
17+
> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.

0 commit comments

Comments
 (0)