Srinesh Srinesh - 2 years ago 182
jQuery Question

Unable to re-size HTML textarea element when CodeMirror modules are used

I have a

in the my
. For the element, i'm using
modules(of CodeMirror).

style="display: flex; flex-flow: column;">
<textarea id="textArea" style="flex:1"></textarea>

I use separate JavaScript file to manipulate the modules.

var textArea = document.getElementById('textArea');
CodeMirror.fromTextArea(textArea, {
lineNumbers: true

When I open this in the browser text area is automatically filled horizontally in the window but not vertically (width:100% & height:50%).
I tried adding
and setting the width and height. But it changes nothing.

<textarea id="textArea" style="flex:1; width:200px; height:300px"></textarea>

Also,I tried change CSS using JavaScript, again, it didn't change the size of the element. = 200; = 300;

I wanted that
to be filled withing <
, that's why I have used
. How can i change the size to fill the parent tag's area (same size as the parent

This is the complete code

Answer Source

.CodeMirror {
  position: relative !important;
  height: 100% !important;
html, body{ 
  min-height: 100%;
  position: relative;
  height: 100%;


Not sure if you have the codemirror css file locally, if you do just modify it and dump the !important declarations.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download