.CodeMirror { resize: vertical; doesn't allow resizing

We’re using CodeMirror 5.60.0. I have the following in my css:

.CodeMirror {
resize: vertical;
height: auto !important;

I’ve also tried setting editor viewportMargin: Infinity.

The resize icon appears in the lower right corner but it doesn’t allow me to grab it (mouse down) to drag it up or down. What am I doing wrong? Thanks in advance.

Works for me, when I add it to a basic test page. You will need to call .resize() when the editor changes size, to make sure it updates its internal layout measurements.

I forgot to mention that we put it inside of an Oracle Jet component oj-text-area which is a wrapper for textarea. The textarea is also resizable but I no longer see its resize icon after attaching CodeMirror to it with fromTextArea().

You mentioned I will need to call .resize() on CM when editor changes size. I assume you mean when the containing browser page changes size?

Is there a sample demo I can look at to see how to do the resize? Thanks

Even when I place CodeMirror in a simple textarea, setting or not setting height: auto, the resize icon does nothing when I try to click down and drag it. I’m doing this on Chrome 89.0.

What I’m doing is going to https://codemirror.net and running something like document.querySelector(".CodeMirror").style.resize = "vertical" in the console. That seems to yield a resizeable editor element (though without the call to .resize() the layout gets screwed up at some point).

I still cannot resize CM directly. I’m putting the CM textarea in a resizable div container that the user can resize. The only problem is that when the cursor in CM moves down below the container viewport, you cannot see the cursor unless you scroll the container down to it.