Ace Editor Doesn't Work With Bootstrap

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 s

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

Solution 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

https://codeply.com/p/hytEdNhVOV