How can I specify the height?

[dukedougal]

I've tried putting the following in options but none seem to make any change.

"height": "100%" "height": "800px" "height": "auto"

How can I set the height?

thanks

[ldabiralai]

@dukedougal

You can set the height via css on .CodeMirror, auto will cause it to take the height of the contents. It's documented here: https://codemirror.net/doc/manual.html#styling

[dukedougal]

I seem to have the syntax wrong - the following code doesn't change the height.....

          <Codemirror onChange={(code) => this.setState({code: code})}
                      value={(!this.state.code) ? '' : this.state.code}
                      style={{"height": "800px"}}
                      options={options}
          />

May I ask the correct syntax please?

thanks

[dukedougal]

Oh I see, sorry you were directing me to update the CSS rather than set an inline style.

It works now thanks with the following in my app.css:

.CodeMirror {
    height: 800px;
}

[0x24a537r9]

Hm, I agree that this is a bit unintuitive. Setting the height on the React container doesn't do anything, which seems a bit odd since it's not like the .CodeMirror element's height is set to auto by default. If it were, I could see why setting the height on the React container should do nothing, but it's not.

Perhaps it would be better to set .CodeMirror { height: 100%; } by default so that it fills the React container. If the React container has no explicit height, the component will automatically size to the editor's contents. If the React container has an explicit height, the component and the CodeMirror instance inside it will be sized exactly as expected.

@JedWatson what do you think?

[revelt]

It works now

@dukedougal Would it make sense to close this issue?

[cuining]

componentDidMount() {
  const cm = this.refs.editor.getCodeMirror();
  const { width, height } = this.props;
  // set width & height
  cm.setSize(width, height);
}
render() {
  return (
    <div className={className}>
      <Codemirror ref="editor" value={value} onChange={value => this.props.onChange(value)} options={options} />
    </div>
  );
}

may help you

[JakeCooper]

@cuining Since this.refs and ReactDOM.findDOMNode are deprecated, you're better off doing the following:

editorRefCallback = (ref) => {
  const cm = ref.getCodeMirror();
  const { width, height } = this.props;
  // set width & height
  cm.setSize(width, height);
}

render() {
    return (
      <div className="CodeMirrorComponent">
        <CodeMirror ref={this.editorRefCallback} value={this.state.code} onChange={this.updateCode} options={options} />
      </div>
    );
  }

[jintomenachery]

Defining a copy of .CodeMirror css file with global keyword will solve this issue.

/* Copied from codemirror */
/* BASICS */ 
:global .CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 450px;
  color: black;
  direction: ltr;
}

Now include this css file,

import "codemirror/lib/codemirror.css";
import "./codeMirror.css";

[lcasoft]

I know this is an old issue but wanted to provide an alternative solution that we've used for our service virtualization tool EkkoProxy where we have many CodeMirror components that needed different sizing etc. meaning we could not use the global css override option (:global .CodeMirror {}) provided elsewhere. Though its also possible to call the setSize using a React ref callback method or via editorDidMount={editor => {editor.setSize(null, 500);}} it's not an elegant solution. So as an alternative and because CodeMirror supports using multiple themes you can just define themes with different styles e.g. height in your stylesheet:

.cm-s-readonly {
    background-color: rgba(170, 170, 170, 0.04) !important;  
}
.cm-s-height400 {
    height: 400px !important;
}
.cm-s-height500 {
    height: 500px !important;
}

Then on the CodeMirror tag specify the themes you need in a particular situation:

<CodeMirror options={{
  theme: 'default height500 readonly',
}} />

These theme style classes are then applied to the main CodeMirror div.

[GlitchFlex]

Oh I see, sorry you were directing me to update the CSS rather than set an inline style.

It works now thanks with the following in my app.css:

.CodeMirror {
    height: 800px;
}

Oh I see, sorry you were directing me to update the CSS rather than set an inline style.

It works now thanks with the following in my app.css:

.CodeMirror {
    height: 800px;
}

I have the Editor placed inside a resizable div. I want to set the height to 100% of its parent container. How do i do so ?