Ace编辑器未使用容器div调整大小

Question

I have container div 'myeditor' and I'm adding an ace editor to that div using:

var editor = ace.edit('myeditor');
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/sql");
editor.getSession().setUseWrapMode(true);

Editor looks like this:

As shown in the above example it is not taking the full width of the container and the black line is coming on the right.

Here, the container is resizable. How can I resize ace editor to fit container whenever the container is resized?

Following is the structure of elements:

There is the main div which has a gutter to expand the div horizontally, which expands inner div as well. Inner div is 'myeditor'. I am not able to share code as it is an internal project.

Answer 1

It looks like you might be referring to the print margin line. If that's the case, you can disable it by using editor.setShowPrintMargin(false); .

Example:

 var editor = ace.edit('myeditor'); editor.setTheme("ace/theme/terminal"); editor.getSession().setMode("ace/mode/sql"); editor.getSession().setUseWrapMode(true); editor.setShowPrintMargin(false); 

 #myeditor { position: absolute; width: 100%; height: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/theme-terminal.js"></script> <div id="container"> Editor is below. <div id="myeditor"> </div> </div> 

Otherwise, I can't seem to reproduce your issue. If you aren't referring to the print margin line, can you include your HTML?