Editor text resizing issue

Question

I am using Ace- Editor like this,

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

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,

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.

Answer 1

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