A display bug

when use code mirror in a tabs Put code mirror control in second tab Initialize some data the code mirror control will be display a blank, until the mouse click (image 1) when click code mirror,will be display the content ,but line number display an error (image 2) The following is the demo code:

            <ul>
        <li onclick="SelectTab(0)">Tab 1</li>
        <li onclick="SelectTab(1)">Tab 2</li>
    </ul>
    <div class="tab-content" id="tab-content-1">
        This is a tab content 1
    </div>
    <div class="tab-content" id="tab-content-2" style="display:none">
        <textarea code-style type="text" id="txtEditor" ng-model="Html"></textarea>
    </div>

<script type="text/javascript"> var SelectTab=function(index){ if (index===0){ $("#tab-content-1").show(); $("#tab-content-2").hide(); }else{ $("#tab-content-2").show(); $("#tab-content-1").hide(); } } $(function(){ var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("txtEditor"), { mode:"javascript", lineNumbers: true, theme:"mbo" , value:"var data = new datetime();" }); }); </script>

before click:

after click:

please check it ! Any question please let me know! thanks

[jianle]

@tiny-v Something worked for me：

    var editor = document.getElementById('editor');
    myCodeMirror = CodeMirror.fromTextArea(editor, {
      mode: "text/x-hive",
      lineNumbers: true,
      lineWrapping: true,
      theme: 'monokai'
    });
    myCodeMirror.setSize('100%', '100%');
    myCodeMirror.setValue(sqls);
    var show = setInterval(function() {
      myCodeMirror.refresh();
    }, 10);
    setTimeout(function() {
      clearInterval(show);
    }, 500);

[MoyuSha]

@jianle myCodeMirror.setSize('100%', '100%'); this worked for me, thanks.