I'm encountering an issue with the sidebar on my HTML page. The problem arises when I click the 'Upload Data' button, causing the sidebar's header to extend beyond the screen if I resize the window. The only way to fix this is by refreshing the page. I am looking for a solution to keep the sidebar contained within the window.
Here is the initial body image:
https://i.sstatic.net/TfZrt.png
And here it is after resizing:
https://i.sstatic.net/0plFz.png
Below is the snippet of the HTML code:
HEAD
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.pngkit.com/png/full/327-3270091_demographic-icon-sign.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar_style_final.css') }}">
... (Code continues)
This is the CSS in the 'sidebar_style_final.css' file:
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
... (CSS continues)
BODY
<body onload="start_nav()" onresize="change_sidebar()">
<div class="grey_bound" id="grey_bound"></div>
<div class="wrapper">
<div id="sidebar">
... (Sidebar content)
</div>
<div id="content">
... (Page content)
</div>
</div>
</body>
SCRIPT
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
... (Script continues)
});
Various attempts have been made to resolve the issue, such as setting scrollTop to 0 and adjusting margins, but the problem persists. Any assistance in resolving this matter would be greatly appreciated. My goal is to ensure that the sidebar remains properly contained within the window.