CODEWITHSUNDEEP
javascriptjquerycsscodemirror
arun
arun

Reputation: 138

codemirror dynamic textarea instances css style not applied

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

Answers (1)

arun
arun

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

Related Questions