CODEWITHSUNDEEP
javascriptjqueryhtmlcss
s1n7ax
s1n7ax

Reputation: 3069

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

Upvotes: 0

Views: 79

Answers (1)

Rick Calder
Rick Calder

Reputation: 18725

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.

Upvotes: 2

Related Questions