CODEWITHSUNDEEP
javascriptjqueryhtmlcssace-editor
Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

Can't Scroll and highlight code in Ace Editor

With the help of this community I was able to make my ace editor full height, so as the users typed or modified it the editor would grow with the code. I recently realized this prevents the user from trying to highlight the code. When you start to highlight the code and begin dragging down when you reach the bottom of the window it stop, it doesn't scroll the window down like you would expect.

Here is the code I am using to make the editor full height. A link to a JSFiddle is below

var editor = ace.edit("editor-html");

setEditorOptions(editor, 'html');

setTimeout(function() {
    heightUpdateFunction();
}, 100);    

function setEditorOptions(editor, type) {
    editor.setShowPrintMargin(false);
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/"+type);
    editor.getSession().on('change', heightUpdateFunction);
}
function heightUpdateFunction() {
    var newHeight = (editor.getSession().getScreenLength() + 1) * editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth();
    $('#editor-html').css('height', newHeight.toString() + "px");
    editor.resize();

    if (newHeight <= 1) {   
        setTimeout(function() {
            heightUpdateFunction();
        }, 100);    
    }
}

I have uploaded an example to try this out of jsfiddle.net.

Is there any way to fix the scrolling when a user tries to hightlight the text?

Upvotes: 2

Views: 5184

Answers (2)

1.21 gigawatts
1.21 gigawatts

Reputation: 17762

If can also happen if you set scrollSpeed to zero. 

editor.setScrollSpeed(0); // no scrolling

editor.setScrollSpeed(.5); // scrolling

I had used an integer to store the scrollSpeed value and when I was passing it .5 it was converted to 0 since integers can only be whole numbers and this disabled scrolling. I switched to using Number or float that allows decimals and scroll started working again.

Upvotes: 0

a user
a user

Reputation: 24104

You should use maxLines and autoScrollEditorIntoView options. like this:

var editor = ace.edit("editor-html");
editor.setOptions({
    maxLines: 1000,
    autoScrollEditorIntoView: true,
    theme: "ace/theme/clouds",
    showPrintMargin: false,
    mode: "ace/mode/html"
})

see https://github.com/ajaxorg/ace/blob/master/demo/autoresize.html#L39.

Note that heightUpdateFunction was suggested when maxLines option wasn't available yet and it doesn't work well. You should use maxLines instead of it.

Upvotes: 4

Related Questions