CODEWITHSUNDEEP
ace-editor
Kata
Kata

Reputation: 705

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

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

Upvotes: 10

Views: 9797

Answers (3)

Bruce Pierson
Bruce Pierson

Reputation: 587

Expanding on jpillora's excellent guidance:

function resizeAce() {
    var h = window.innerHeight;
    if (h > 360) {
        $('#editor').css('height', (h - 290).toString() + 'px');
    }
};
$(window).on('resize', function () {
    resizeAce();
});
resizeAce();

window.innerHeight is supported by IE8+ and seems reliable for getting the usable area of the screen. I ended up with identical results on IE9, FF, and Chrome. I also found that I had to use the jQuery on syntax to reliably catch the window resize event.

I needed to use jQuery css because in my case I'm resizing a pre element (that shows coding help) that sits to the right of the code editor, and this was the only way to get the two elements to exactly the same height.

The 360 and 290 are the numbers I needed to use to account for all the menus and tabs taking up vertical space at the top of my page. Adjust accordingly.

Upvotes: 4

a user
a user

Reputation: 24104

set position:absolute;top:0; bottom:0 like https://github.com/ajaxorg/ace-builds/blob/master/editor.html#L14

Upvotes: 4

jpillora
jpillora

Reputation: 5262

function resizeAce() {
  return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();

Upvotes: 12

Related Questions