user3213604 user3213604 - 3 months ago 30
React JSX Question

Am unable to increase Height of Codemirror React Component

In my React application, I am using 'Editor.jsx component (which is just a wrapper around code-mirror, in case I need to provide frills around the actual CodeMirror-view).

The in which the rendered component from attached file is added to, has height of 100% and other components similar to CodeMirror do use that full height.

The CodeMirror component however only shows 15 lines (and i have to scroll to get to the ones below).

The code is very similar to the sample from github. The

height
property in getInitialState() also has no effect (neither does the containing ).

import React from 'react';
var CodeMirror = require('react-codemirror');

// fishing this 'require' out has caused severe headache and cost time.
// IF not included, default bootstrap style used. must override it with this.
// but for react-codemirror component we need this one!!!
// REF http://dorianpula.ca/2015/10/07/adding-a-code-editor-to-rookeries/
require("codemirror/lib/codemirror.css");
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/python/python');

var DFLTS = {
javascript: 'var component = {\n\tname: "react-codemirror",\n\tauthor: "Jed Watson",\n\tforUseBy: "KB"}',
python: 'print "hello python world"'
}

export default React.createClass ({

localOnCodeChange(newCode) {
this.props.onCodeChange(newCode)
},
getInitialState() {
return {
code: DFLTS.javascript,
readOnly: false,
mode: 'javascript',
height:"100%",
viewportMargin: "Infinity"

};
},
componentDidMount() {
CodeMirror.setSize("100%", 1000);
},

changeMode(e) {
// add python later.
// no-op
},

toggleRreadOnly() {
this.setState({
readOnly: !this.state.readOnly
}, () => this.refs.editor.focus());
},

interact(cm) {
console.log(cm.getValue());
},

render() {
var options = {
lineNumbers: true,
readOnly: this.state.readOnly,
mode: this.state.mode
};

return (
<CodeMirror ref="editor" value={this.props.code} onChange={this.props.onCodeChange} options={options} interact={this.interact}/>
)
}
});


Any pointers, greatly appreciated.

Answer

The .CodeMirror class in this library appears to have a hard-coded height: 300px in it and there's an unanswered question in their issues about being able to set the height. If you put .CodeMirror { min-height: 100% } in your CSS that might do the trick.

Alternatively pass a className to <CodeMirror> (it will get added to the classes) that sets a min height, or a height with !important, or just greater specificity.

(Tsk tsk to components that you have to fight with :))