ace editor dosen't show without chrome dev tools

So... this is weird?! when i try and use an ACE editor in google chrome in the following context:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style>
         body {
             background-color: rgb(0, 0, 0);
         }

         .preview {
             position: fixed;
             margin: 0 auto;

             width:800px;
             height:600px;

             background-color:#3D3D3D;
         }

         #code {
             width:800px;
             height:600px;      
             position: fixed;
             margin: 0 auto;
         }
    </style>
 </head>
 <body>

     <div class="preview" id="preview_layer_1" style="z-index:0;">
         nothing much yet
     </div>

     <div class="preview" id="preview_layer_2" style="z-index:1; background-color:;">
     </div>

     <div id="code" style="z-index:2;"></div>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js" type="text/javascript" charset="utf-8"></script>
         <script>
         $(document).ready(function(){
             $("#code").hide();

             $(".preview").dblclick(function(){
                 $("#code").fadeIn();
             })

             $("#code").dblclick(function(){
                 $("#code").fadeOut();
             })

         });

         var Editor = ace.edit("code");
         var Haxe = ace.createEditSession("","ace/mode/haxe");
         var JSON = ace.createEditSession("","ace/mode/json");
         Editor.setTheme("ace/theme/monokai");
         Editor.setSession(Haxe);

         Editor.focus();
         </script>

 </body>

so like any sane person i go to chrome dev tools to check whats going on and then suddenly it works!

so i reload it repeat the steps without opening devtools and then wait... but nothing happens! and i don't know where to start the code looks fine to me but i'm sure its just a dumb error that i've made, right?

Thanks in advance

Solution

You need to call Editor.resize() when changing position or display of the editor container element, to allow the editor to adapt to the size changes.

It works when opening chrome devtools, because window size changes, and that calls the resize() method.

The following should work:

         $(".preview").dblclick(function(){
             $("#code").fadeIn();
             Editor.resize();
         })