I'm facing an issue with a layout containing a div that expands to the screen size upon clicking a button. Initially, the div has enough content to necessitate scrolling. However, after collapsing back to its original size, the scroll bar disappears and some content becomes hidden.
What could be causing this unexpected behavior? I attempted to address it by reapplying the overflow auto CSS within the toggle function, but unfortunately, it didn't resolve the problem.
<?xml version="1.0" encoding="utf-8" ?>
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>Untitled 2</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
var height = $( window ).height();
var width = $( window ).width();
canvasHeight = height - 282;
$("#mainCanvas").css({"height" : canvasHeight});
$("#header").css({"min-width" : width});
$("#mainCanvas").css({"min-width" : width});
$("#legend").css({"min-width" : width});
$("#footer").css({"min-width" : width});
$("#toggle").click(function() {
if($("#mainCanvas").height() != height) {
$("#header").hide();
$("#legend").hide();
$("#footer").hide();
$("#detail").animate({"top" : '0px'});
$("#toggle").animate({"top" : '0px'});
$("#mainCanvas").animate({"height": height}, {"queue": false, "duration": 500}).animate({"width": width}, 500);
$("#toggle").html('<img id="expand" src="img/collapse.png">');
}
else {
$("#mainCanvas").animate({"height": canvasHeight}, {"queue": false, "duration": 500}).animate({"width": '100%'}, 800);
$("#header").show();
$("#legend").show();
$("#footer").show();
$("#detail").animate({"top" : '92px'});
$("#toggle").animate({"top" : '92px'});
$("#toggle").html('<img id="expand" src="img/expand.png">');
}
}); // End Expand/Collapse
});
</script>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
img#expand {
width: 20px;
cursor: pointer !important;
margin-left: 7px;
margin-top: 2px;
}
/* Application Details */
div#toggle {
left: 95%;
top: 92px;
width: 34px;
height: 29px;
border: 1px solid #ccc;
background: white;
padding-top: 5px;
position: fixed;
}
</style>
</head>
<body>
...