react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

How can I specify the height?

Open dukedougal opened this issue 8 years ago • 10 comments

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

dukedougal avatar Aug 03 '16 05:08 dukedougal

@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

ldabiralai avatar Aug 15 '16 12:08 ldabiralai

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 avatar Aug 15 '16 23:08 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;
}

dukedougal avatar Aug 16 '16 00:08 dukedougal

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?

0x24a537r9 avatar Oct 12 '16 07:10 0x24a537r9

It works now

@dukedougal Would it make sense to close this issue?

revelt avatar Dec 22 '16 13:12 revelt

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

cuining avatar Dec 24 '16 06:12 cuining

@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>
    );
  }

JakeCooper avatar Jan 21 '17 05:01 JakeCooper

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";

jintomenachery avatar Nov 14 '18 14:11 jintomenachery

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.

lcasoft avatar Jan 24 '20 14:01 lcasoft

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 ?

GlitchFlex avatar Sep 04 '23 17:09 GlitchFlex