auto expand (overflow: auto) for the editor div

[newtechfellas]

How do I make the editor div auto expand as I type the content into it? I tried overflow:auto css but it did not help.

[marshall007]

See the autoresize demo. Basically you'll want this in your onLoad callback:

editor.setOptions({
  autoScrollEditorIntoView: true,
  maxLines: 50
})

Note that you should avoid setting maxLines to Infinity as this disables the virtual viewport (only rendering what is visible) and forces ace to create and render DOM nodes for the entire document. This can cause performance issues for large documents so just set it to something reasonable.

[bpmckee]

This doesn't seem to work with u-i-ace. Only with the standard ace.js

[RonnieSan]

Notice it says you want to place it in the onLoad callback. So do it like this in your controller:

$scope.ace_options = {
    onLoad : function(editor) {
        autoScrollEditorIntoView : true,
        maxLines : 500
    }
};

Then in your HTML:

<div ui-ace="ace_options" ng-model="my_code"></div>