Why does my CodeMirror's height doesn't change with the CSS?

1

I’m using CodeMirror to display a JSON (the component is inside a simple div):

<codemirror v-model="codeToPrint" class="CodeMirror" :options="cmOptions"/>

And here are my options :

cmOptions: {
      mode: "application/json",
      lineNumbers: true,
      lineWrapping: true,
      viewportMargin: Infinity,
      readOnly: true,
      matchBrackets: true,
    },

The size doesn’t change even If I try height : 1500px; or any number. I try to search in the documentation but I didn’t find any solution.

What am I doing wrong?

I’m using Vue.js and codemirror as a component.

2

How are you setting the height? That’s not obvious from the code you show.

3

Inside a <div style="height: 1500px;"><codemirror>...</codemirror></div>

I tried to put the style inside the component too.Same result.

Here how I import

import Vue from 'vue'
import codemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
4

The editor’s built-in styles set a default height of 300 pixels for .CodeMirror—maybe you didn’t override that with height: auto? Beyond that, I don’t know what DOM structure your component is creating, and the browser’s devtools are probably the best way to debug this.