My implementation of the Ace- Editor looks like this:
<div id="AceEditor"></div>
The blue area acts as my editor, with the following CSS styling:
#AceEditor
{
position: absolute;
top: 0;
right: 300px;
bottom: 420px;
left: 0px;
overflow: auto;
}
I have set up a functionality in Javascript to allow the console log area to be minimized. Here is the code snippet for that:
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();
});
However, I am facing an issue where the text cursor does not move below the 420px line when the window is minimized. To address this, I modified the CSS description of AceEditor to have a bottom value of 0px.
#AceEditor
{
position: absolute;
top: 0;
right: 300px;
bottom: 0px;
left: 0px;
overflow: auto;
}
Even though this change allowed the text to reach the bottom of the page, the text does not adjust automatically when the console log is maximized to a new bottom pixel value.
How can I solve this problem effectively?
In response to suggestions provided, I attempted the following approaches:
if($("#button").html() == "Minimize")
{
$('#AceEditor').css("bottom",420).resize();
}
else
{
$('#AceEditor').css("bottom",0).resize();
}
if($("#button").html() == "Minimize")
{
$('#AceEditor').css("bottom",420);
$('#AceEditor').resize();
}
else
{
$('#AceEditor').css("bottom",0).resize();
$('#AceEditor').resize();
}
Despite trying these solutions, the issue still persists.