Ace editor doesn't work with bootstrap

Question

I use boostrap default example theme: http://getbootstrap.com/examples/jumbotron-narrow/

and i'd like to past ace editor instead central block, but ace editor doesn't work (empty space):

...
<div class="container-narrow">
  <div class="masthead">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="#">Home</a></li>
    </ul>
    <h2 class="muted">Title</h2>
  </div>
  <hr>
  <textarea name="text" style="display: none;"></textarea>
  <div id="editor">Text</div>
  <hr>
  <div class="footer">
    <p>&copy; SiteName</p>
  </div>
</div> <!-- /container -->

<script src="style/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/xcode");
  editor.getSession().setMode("ace/mode/c_cpp");
</script>
...

What am I doing wrong?

Answer 1

To test what goes wrong:

1. check if Ace have added other divs into <div id="editor">, if no, there must be some js error in console.
2. If Ace is there but isn't visible, remove all text from <div id="editor"> and comment out ace.edit line to see what size ace will get (ace tries to match height of that div)
3. if the issue is indeed that Ace gets height=0, either add explicit height to the editor div,
4. or if you want it to fit to text, set maxLines and minLines options as shown in https://github.com/ajaxorg/ace-builds/blob/v1.1.6/demo/autoresize.html#L41-L43, however setting maxLines very large isn't recomended since it disables optimization of drawing only visible text, and can make editor slow for large documents.

Answer 2

Ace should work fine with Bootstrap. Make sure you've included the appropriate ACE js scripts and set an specific height for it's container.

Ace Bootstrap Example

http://www.bootply.com/5wt39zvswV