Reputation: 138
I am trying to add textareas dynamically to div element on button click. And after appending the textarea , I create Codemirror textarea editor instances using CodeMirror.fromTextArea, the codemirror textarea editor is added, but the css style height auto is not applied.I want the codemirror editor to have auto height and expand when users type. here is the code
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
</style>
<script>
$(document).ready(function(){
count=0
$('#addtextcells').click(function(){
var newtextarea='<textarea id="check'+count+"textarea"+'"></textarea>'
textareaid='check'+count+'textarea'
arun='#'+textareaid
$('body').append(newtextarea)
var editor= CodeMirror.fromTextArea(document.getElementById(textareaid), {
lineNumbers: true,
viewportMargin: Infinity
});
count++
});
});
</script>
<button id="addtextcells">Add Cells</button>
The editor height is not set to auto, but if i give a fixed height in style, the height of the editor is adjusted correctly.Any solutions
Upvotes: 0
Views: 613
Reputation: 138
I found the solution myself, setting the css style of Codemirror scroll height to auto did the trick. the final css should be like this
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
height: auto;
}
</style>
Upvotes: 1