# Force a layout pass programmatically

**URL:** https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914
**Category:** v6
**Created:** [March 9, 2023, 2:36am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914 "2023-03-09T02:36:15Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![GnohzGniy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/gnohzgniy/32/5306_2.png) [@GnohzGniy](https://discuss.codemirror.net/u/GnohzGniy)
#### Post date: [March 9, 2023, 2:36am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/1 "2023-03-09T02:36:15Z")

</div>

Hi @marijn recently I noticed a really minor layout problem with my app, the height of line number gutters is not initially correct:

 ![image](https://discuss.codemirror.net/uploads/default/original/2X/7/73bceff9ad86d2254361189839eef895fdac12cd.jpeg)

It will eventually be corrected at some point (it’s an eye-blinking thing):

 ![image](https://discuss.codemirror.net/uploads/default/original/2X/f/fb5ca142e6076f02f44b13a8bbb8dd2e56dbc79a.jpeg)

However, this brings a UI glitch to users. I noticed that if I fake a text edit with something like this:

```plaintext
editor.dispatch({ changes: { from: 0, insert: ' ' } }); // undo the change later

```

The editor will perform the layout earlier, and it “fixes” the issue. I know this is not the ideal way to trigger a layout, do you have any recommendations that I am not aware of?

P.S. `requestMeasure` won’t do the trick ☹

Thanks!

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [March 9, 2023, 6:36am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/2 "2023-03-09T06:36:49Z")

</div>

Could it be that your fonts or styles are loading after the editor initializes? A `view.requestMeasure()` should cause it to re-measure its layout. Sometimes it helps to do this on a `"load"` event.

---

<div class="post-metadata">

### Author: ![GnohzGniy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/gnohzgniy/32/5306_2.png) [@GnohzGniy](https://discuss.codemirror.net/u/GnohzGniy)
#### Post date: [March 9, 2023, 6:53am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/3 "2023-03-09T06:53:10Z")

</div>

> [@marijn](#):
>
> Could it be that your fonts or styles are loading after the editor initializes?

Thanks for the quick reply. I was thinking about the same thing, but it seems I can repro even with plain styles.

I will try if moving `requestMeasure` to other places work, thanks.

---

<div class="post-metadata">

### Author: ![GnohzGniy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/gnohzgniy/32/5306_2.png) [@GnohzGniy](https://discuss.codemirror.net/u/GnohzGniy)
#### Post date: [March 9, 2023, 7:37am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/4 "2023-03-09T07:37:36Z")

</div>

> [@marijn](#):
>
> Sometimes it helps to do this on a `"load"` event.

Update: it doesn’t work, seems right now faking a text edit is the only way that works, lol.

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [March 9, 2023, 8:19am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/5 "2023-03-09T08:19:45Z")

</div>

If you can simplify the case where the editor loads up incorrectly to an HTML/JS page that uses no dependencies beyond CodeMirror, I’ll gladly debug it.

---

<div class="post-metadata">

### Author: ![GnohzGniy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/gnohzgniy/32/5306_2.png) [@GnohzGniy](https://discuss.codemirror.net/u/GnohzGniy)
#### Post date: [March 9, 2023, 10:04am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/6 "2023-03-09T10:04:12Z")

</div>

Thanks for being so kind. This is a good point, I don’t use other dependencies, but the project is getting a bit complicated now, I think a minimal repro would help me understand the issue better.

Will update this thread once I have one.

---

<div class="post-metadata">

### Author: ![GnohzGniy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/gnohzgniy/32/5306_2.png) [@GnohzGniy](https://discuss.codemirror.net/u/GnohzGniy)
#### Post date: [April 4, 2023, 3:56am UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/7 "2023-04-04T03:56:02Z")

</div>

I just noticed one thing weird, it seems calling `view.coordsAtPos()` can also “fix” the issue.

---

<div class="post-metadata">

### Author: ![imolorhe](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/imolorhe/32/2276_2.png) [@imolorhe](https://discuss.codemirror.net/u/imolorhe)
#### Post date: [September 28, 2023, 11:04pm UTC](https://discuss.codemirror.net/t/force-a-layout-pass-programmatically/5914/8 "2023-09-28T23:04:27Z")

</div>

I also need something like this. The layout (particularly the line number gutters) are a bit off, but in my case I hide and show the content at different points, so I can understand why it happens. I just need to be able to manually trigger the redraw of the layout again. In codemirror 5, I was able to call `refresh()`.

None of the options specified in this thread so far helped.
