Having trouble with scrollbars when embedding ace

[ryan]

When I embed ace, I can't seem to get the sizing right.

If I put ace in a container that has 100% width and 100% height, I get
double scrollbars. If I then set the overflow to hidden, I can't see
the editor scrollbars.

I've also tried to set the container size using javascript before
loading ace. This works better but the vertical editor scrollbar
partially overflows. So it's not perfect.

The full window editor in the build directory works perfectly for me.

Just wondering if anyone has tackled a similar issue and any tips you
may have.

[Hai Dang]

Hey ryan, I ran into the same problem before. Here is how I dealt with
it. Give it a try.

Since ace tries to size and posit its components basing on its editor
DOM, it's all about keeping your editor element in form.
ace uses absolute position (position:absolute), so maybe you should
try span the editor DOM all over the container, then set the container
with specific size, load ace then (maybe unnecessarily) use ace built-
in function resize() to put the components in place (if they are not).

First some HTML

<div id="container" style="position:relative;">
<div id="editor" style="position:absolute; top:0;bottom:0;left:
0;right:0">
</div>
</div>

Javascript (jQuery):
$(function(){
$('#container').css('width', 800);
$('#container').css('height', 600);

var editor = ace.edit('editor');
editor.resize(); //maybe unnecessary
})

You may also want to attach some event on window.resize to adapt the
container to the window's new size.

Cheers.

[ryan]

Thanks for the advice. It helped me get it working properly.