Resize ajax.org ACE editor based on browser's size

ace-editor
Kata picture Kata · Apr 13, 2012 · Viewed 9.6k times · Source

I want to let the ACE editor to be resizable based on the browser's size. however, the editor element must be explicitly sized in order to be initialized by the ace editor's API.

The editor works when I set the width:100%/height:400px. Having this setting allows the editor 's width responsive to the browser's width. However, not responsive for the editor's height.

Is there a way to make the editor's size more flexible by responding to browser's size?

Thanks

Answer

jpillora picture jpillora · Oct 4, 2012 
function resizeAce() {
  return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();

Related questions

How do I make a textarea an ACE editor?

I'd like to be able to convert specific textareas on a page to be ACE editors. Does anyone have any pointers please? EDIT: I have the the editor.html file working with one textarea, but as soon as I add …

Read More
How do I get value from ACE editor?

I am using ACE editor for the first time. I have the below questions related to it. How do I find the instance of ACE editor on the page? I don't want to maintain a global variable which will hold …

Read More
Automatically adjust height to contents in Ace Cloud 9 editor

I'm trying to add the Ace editor to a page, but I don't know how to get the height to be set automatically based on the length of its contents. Ideally it would work so when the content changes the …

Read More