Srinesh Srinesh - 5 months ago 12
jQuery Question

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

I have a

textarea
in the my
HTML
. For the element, i'm using
codemirror.js
and
codemirror.css
modules(of CodeMirror).

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


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
<style>
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.

textArea.style.width = 200;
textArea.style.height = 300;


I wanted that
<textarea>
to be filled withing <
md-content>
, that's why I have used
flex:1
. How can i change the size to fill the parent tag's area (same size as the parent
md-content
).

This is the complete code

Answer

https://jsfiddle.net/e86pztkh/1/

.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.

Comments