Make a CodeMirror editor and its gutter 100% height of container

codemirror
Don P picture Don P · Nov 11, 2014 · Viewed 11.1k times · Source

How do I make a CodeMirror editor and its gutter 100% of the height of its parent?

For example, on jsfiddle, the editors have a 100% height gray gutter.

I've gone through the CSS trying to make everything 100% height, but no effect.

Answer

Marijn picture Marijn · Nov 11, 2014

A CSS rule like .CodeMirror { height: 100%; } should work. Note that when the parent element changes size after the editor has been initialized, you are responsible for calling .refresh() on your CodeMirror instance to make sure it correctly draws itself.

Related questions

How to get the value of Codemirror textarea

I am using Codemirror's plugin for textarea but I am not able to retrieve the value of textarea. Code: var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, matchBrackets: true, mode: "text/x-csrc" }); function showCode() { var text = editor.mirror.getCode(); …

Read More
How can I set the value of a CodeMirror editor using Javascript?

I try to set id4 in the following code: <div id="id1"> <div id="id2"> <div id="id3"> <textarea id="id4"></textarea> </div> </div> </div&…

Read More
When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

The App: I have a textarea element in my page. It is transformed using CodeMirror, because I need to indent and highlight html code withing it. Pic is in the link: [textarea using codemirror] http://uploadingit.com/file/gxftd2cps9…

Read More