未应用 codemirror 动态 textarea 实例 css 样式答案

【问题标题】：codemirror dynamic textarea instances css style not applied未应用 codemirror 动态 textarea 实例 css 样式
【发布时间】：2017-02-06 08:27:36
【问题描述】：

我正在尝试在单击按钮时将 textareas 动态添加到 div 元素。在附加 textarea 之后，我使用 CodeMirror.fromTextArea 创建 Codemirror textarea 编辑器实例，添加了 codemirror textarea 编辑器，但未应用 css 样式高度自动。我希望 codemirror 编辑器具有自动高度并在用户键入时展开。这是代码

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

编辑器高度未设置为自动，但如果我在样式中给出固定高度，则编辑器高度调整正确。任何解决方案

【问题讨论】：

我自己找到了解决方案，将 Codemirror 滚动高度的 css 样式设置为 auto 就可以了。CodeMirror-scroll { height: auto; }

标签： javascript jquery css codemirror

【解决方案1】：

我自己找到了解决方案，将 Codemirror 滚动高度的 css 样式设置为 auto 就可以了。最终的css应该是这样的

  <style type="text/css">
    .CodeMirror {
      border: 1px solid #eee;
      height: auto;
     }
   .CodeMirror-scroll {
       height: auto;
     }
  </style>

【讨论】：