CODEWITHSUNDEEP
javascripthtmlcssace-editor
user1733583
user1733583

Reputation:

Editor text resizing issue

I am using Ace- Editor like this,

<div id="AceEditor"></div>

enter image description here

The blue area is my editor,

#AceEditor 
{ 
    position: absolute;
    top: 0;
    right: 300px;
    bottom: 420px;
    left: 0px;
    overflow: auto;
}

Using Javascript, I've configured the console log area to be minimizible as follows,

if($("#button").html() == "Minimize")
{
    $('#AceEditor').css("bottom",420);
}
else
{
    $('#AceEditor').css("bottom",0);
}

$("#button").click(function(){
    if($(this).html() == "Minimize"){
        $(this).html("Maximize");
        $('#AceEditor').css("bottom",0);
    }
    else{
        $(this).html("Minimize");
        $('#AceEditor').css("bottom",420);
    }
    $("#ConsoleDisplay, #ConsoleBar").slideToggle();
});

Now the problem is, when I press minimize the window gets minimized but the text cursor doesn't move below the 420px lise as shown in the below image,

enter image description here

So to sovle this,

I've tried changing the CSS AceEditor description to 

#AceEditor 
{ 
    position: absolute;
    top: 0;
    right: 300px;
    bottom: 0px;
    left: 0px;
    overflow: auto;
}

and now though the text reached the bottom of the page, when the console log is maximized the text doesn't auto adjust to the new bottom pixel

How do I solve this problem?

Based on the answer below, I've tried

if($("#button").html() == "Minimize")
{
  $('#AceEditor').css("bottom",420).resize();
}
else
{
  $('#AceEditor').css("bottom",0).resize();
}

and also tried,

if($("#button").html() == "Minimize")
{
  $('#AceEditor').css("bottom",420);
  $('#AceEditor').resize();
}
else
{
  $('#AceEditor').css("bottom",0).resize();
  $('#AceEditor').resize();
}

But still the problem persists.

Upvotes: 1

Views: 225

Answers (1)

a user
a user

Reputation: 24159

after changing editor size, you should call editor.resize() to let the editor update its size.

Upvotes: 2

Related Questions