variable height editor that scrolls

1

Hi, I’ve implemented codemirror as a scrollable editor for https://l0-lab-demo.lamdera.app/ . At the moment I have

const fixedHeightEditor = EditorView.theme({
    "&": {height: "700px"   },
    ".cm-scroller": {overflow: "auto"}
  })

This works until the user resizes the window of the host app. If the user reduces its height, one gets something like the below, where the text scrolls off below the intended region, which is set
dynamically in the host app. I need to get the height set dynamically within codemirror.

image
image1920×959 135 KB

2

You mean you need to adjust the 700px dynamically? Ideally, you’d express that in some way (such as 100%) so that it automatically adjusts to the parent container. Failing that, you could use editorAttributes instead of a theme to set the editor height.

3

The maxHeight: '100%' suggestion works perfectly. Thankyou!