AliShahVis
Reputation: 141
How to fix sidebar extending the page too far
I've added max-width but still, whenever my side-nav comes out my page doesn't fit precisely on the screen! I'd like all elements to fit on the page responsively. If the side-nav comes out, I want the page-content box to fit on the page in the same ratio of dimensions, just smaller. What I've put in hasn't worked. The page extends by how much the navbar is, but also, all elements don't fit in the window neatly. I am making this into a dashboard so I'd like it to all show on one page.
{% extends 'base.html' %}
{% block title %}
<title>Visualisation</title>
{% endblock %}
{% block body %}
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="header-bar-wrapper">
<span>Pet Owner Visualisation</span>
</div>
<div class="count-wrapper">
<svg id='inner-ring' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><path d="M25.025,49.625c-0.276,0-0.5-0.224-0.5-0.5c0-0.275,0.224-0.5,0.5-0.5c4.151-0.004,8.232-1.1,11.803-3.169 c0.236-0.139,0.544-0.06,0.684,0.182c0.139,0.239,0.057,0.545-0.182,0.684C33.606,48.479,29.353,49.621,25.025,49.625L25.025,49.625 z M12.964,46.413c-0.085,0-0.17-0.021-0.25-0.066c-3.737-2.156-6.856-5.267-9.022-8.996c-0.139-0.238-0.057-0.545,0.182-0.684 c0.241-0.138,0.545-0.057,0.684,0.182c2.078,3.578,5.071,6.563,8.657,8.631c0.239,0.139,0.321,0.444,0.183,0.684 C13.305,46.323,13.137,46.413,12.964,46.413z M45.901,37.558c-0.085,0-0.171-0.021-0.25-0.067c-0.239-0.138-0.321-0.443-0.183-0.683 c2.064-3.573,3.156-7.656,3.156-11.808l-0.001-0.101c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5l0.001,0.086 c0,4.342-1.138,8.598-3.291,12.322C46.241,37.468,46.073,37.558,45.901,37.558z M0.875,25.525c-0.276,0-0.5-0.198-0.5-0.475h0.5 l-0.5-0.022c-0.001-4.337,1.128-8.578,3.265-12.292c0.139-0.239,0.444-0.321,0.683-0.184c0.239,0.138,0.322,0.443,0.184,0.683 C2.458,16.798,1.375,20.866,1.375,25C1.375,25.276,1.152,25.525,0.875,25.525z M45.851,13.356c-0.172,0-0.339-0.089-0.432-0.248 c-2.087-3.575-5.088-6.553-8.677-8.613c-0.239-0.137-0.322-0.443-0.185-0.683c0.138-0.24,0.441-0.321,0.683-0.185 c3.74,2.146,6.867,5.25,9.042,8.976c0.14,0.238,0.059,0.544-0.18,0.684C46.023,13.334,45.937,13.356,45.851,13.356z M12.878,4.637 c-0.172,0-0.34-0.089-0.433-0.249c-0.139-0.238-0.058-0.544,0.181-0.684c3.718-2.165,7.97-3.316,12.296-3.33c0,0,0.001,0,0.001,0 c0.275,0,0.499,0.223,0.5,0.499s-0.222,0.5-0.499,0.501c-4.15,0.013-8.229,1.117-11.796,3.194 C13.05,4.615,12.964,4.637,12.878,4.637z"></path></svg>
<svg id='outer-ring' xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 100 100" version="1.1" x="0px" y="0px"><title>PDP-Icon-Circle</title><g transform="translate(0,-270.54167)"><ellipse style="" cx="95.109993" cy="321.81519" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="94.051575" cy="330.34082" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="91.393639" cy="338.5105" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="87.228989" cy="346.02518" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="81.718971" cy="352.61722" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="75.066666" cy="358.05396" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="67.507515" cy="362.13641" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="59.307789" cy="364.69803" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="50.771435" cy="365.65091" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="42.207973" cy="364.99423" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="33.923241" cy="362.72937" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="26.221169" cy="358.92639" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="19.378035" cy="353.7327" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="13.634921" cy="347.34256" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="9.1994591" cy="339.98349" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="6.2463722" cy="331.91412" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="4.890008" cy="323.4296" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="5.1496711" cy="314.8421" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="7.0256963" cy="306.45844" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="10.453431" cy="298.58093" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="15.308842" cy="291.49374" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="21.415846" cy="285.4509" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="28.560387" cy="280.67938" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="36.479439" cy="277.35001" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="44.884468" cy="275.57993" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="53.471874" cy="275.43243" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="61.932163" cy="276.91086" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="69.96019" cy="279.96378" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="77.266365" cy="284.48059" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="83.588326" cy="290.29752" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="88.693733" cy="297.20853" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="92.39238" cy="304.96426" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="94.557289" cy="313.27911" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse></g></svg>
<svg id='innermost-circle' xmlns="http://www.w3.org/2000/svg" data-name="Layer 21" viewBox="0 0 32 32" x="0px" y="0px"><title>Circle</title><circle cx="16" cy="16" r="14.5"></circle></svg>
<svg id='vis-logo' height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M34.777,14.713c0-5.6,4.54-10.139,10.139-10.139c5.599,0,10.138,4.539,10.138,10.139s-4.54,10.138-10.138,10.138 C39.317,24.851,34.777,20.313,34.777,14.713z M70.98,51.486l-5.762-11.87c-3.732-7.721-6.25-13.021-13.685-13.021H38.298 c-7.436,0-9.952,5.3-13.686,13.021l-6.851,14.117c-1.018,2.084-0.146,4.585,1.938,5.602c2.083,1.018,4.608,0.153,5.625-1.931 l9.474-18.298l-6.923,34.396h6.923v17.366c0,2.517,2.04,4.558,4.557,4.558s4.557-2.041,4.557-4.558V73.502h2.007v17.366 c0,2.517,2.041,4.558,4.558,4.558s4.557-2.041,4.557-4.558V73.502h6.923l-6.923-34.396c0,0,9.632,18.593,9.722,18.731 C66.166,54.656,69.144,52.146,70.98,51.486z M84.321,89.862V71.273c-2.124,2.372-6.327,2.451-6.327,2.451s-4.201-0.079-6.326-2.451 v18.589c0,0-2.723,0.236-2.723,2.959c0,1.257,1.35,2.604,2.975,2.604c3.373,0,5.193-1.303,5.193-3.592s0-8.915,0-8.915 c0.025-0.394,0.191-0.841,0.891-0.841c0.666,0,0.837,0.479,0.872,0.808c0,0,0,6.604,0,8.948s1.82,3.592,5.193,3.592 c1.625,0,2.974-1.348,2.974-2.604C87.043,90.099,84.321,89.862,84.321,89.862z M70.041,89.4c0,0,0-11.238,0-11.244 c-11.454-4.287-4.538,11.706-4.538,11.706s-2.723,0.236-2.723,2.959c0,1.258,1.351,2.604,2.975,2.604 c1.332,0,2.345-0.615,2.345-0.615C65.957,91.235,69.26,89.4,70.041,89.4z M91.518,87.026c-0.517,1.645-1.031,2.836-1.031,2.836 s2.723,0.236,2.723,2.959c0,1.258-1.35,2.604-2.975,2.604c-1.332,0-2.345-0.615-2.345-0.615c2.144-3.575-1.159-5.41-1.941-5.41 c0,0-0.001-11.238,0.001-11.244c4.693-1.757,6.301-0.107,6.564,2.451C98.349,82.25,100,77.426,100,77.426 C99.577,84.504,92.601,86.724,91.518,87.026z M68.994,62.844c0.846-1.813,2.851-5.826,3.793-5.378c0,0-3.102,6.471-3.102,7.292 c0,0.811,0.307,2.631,1.455,4.304c1.041,1.519,3.075,3.327,6.854,3.327c6.898,0,8.309-6.02,8.309-7.631 c0-0.77-3.117-7.285-3.117-7.285c0.936-0.508,2.96,3.547,3.813,5.371c0.883,1.893,3.531,2.901,3.531-1.45 c0-4.242-4.667-8.262-6.307-8.515c-1.211-0.186-2.213,0.868-2.602,1.377c-0.986-0.432-2.187-0.644-3.637-0.644 c-1.457,0-2.662,0.214-3.652,0.648c-0.4-0.524-1.373-1.565-2.563-1.382c-1.64,0.253-6.308,4.272-6.308,8.515 C65.461,65.745,68.111,64.736,68.994,62.844z M26.958,94.582c0,0,0.235,0.557,1.041,0.557c1.473,0,2.287-1.221,2.287-2.362 c0-2.469-2.47-2.683-2.47-2.683s7.772-14.509-2.616-10.619c-0.002,0.006-0.002,10.199-0.002,10.199 C25.905,89.674,28.903,91.338,26.958,94.582z M1.023,66.094c3.537,1.004,2.444,4.575,1.383,7.111 c-1.613,3.862-1.743,6.973-0.388,9.242c1.052,1.761,2.726,2.523,3.813,2.845c0.827,2.514,2.053,4.802,2.053,4.802 s-2.47,0.214-2.47,2.683c0,1.142,0.813,2.362,2.288,2.362c0.804,0,1.041-0.557,1.041-0.557c-1.945-3.244,1.05-4.908,1.76-4.908 c0,0,0-10.193-0.002-10.199c-4.223-1.581-5.446-0.12-5.408,2.17c-1.813-1.368-1.227-4.485-0.038-7.333 c1.423-3.403,1.673-5.991,0.764-7.914c-0.691-1.459-1.989-2.458-3.972-3.053c-0.759-0.227-1.557,0.204-1.785,0.964 C-0.167,65.066,0.262,65.878,1.023,66.094z M9.354,92.981c0,1.179,1.267,2.444,2.792,2.444c3.167,0,4.876-1.171,4.876-3.371 c0-0.938,0-2.6,0-4.198c-1.701-0.364-2.977-1.875-2.977-3.685c0.209,1.882,1.829,2.926,3.769,2.926 c1.938,0,3.557-1.044,3.766-2.926c0,1.785-1.239,3.277-2.903,3.667c0,1.612,0,3.29,0,4.216c0,2.148,1.708,3.371,4.876,3.371 c1.526,0,2.792-1.266,2.792-2.444c0-2.558-2.555-2.78-2.555-2.78V77.012c0,0-1.637,2.056-5.939,2.056 c-4.304,0-5.941-2.056-5.941-2.056v13.189C11.91,90.201,9.354,90.424,9.354,92.981z M10.325,69.247 c-0.219,0.605-0.337,1.248-0.337,1.911c0,3.656,3.561,6.62,7.956,6.62c4.393,0,7.955-2.964,7.955-6.62 c0-0.663-0.12-1.306-0.338-1.911c0.432-1.37,0.93-4.323-0.997-7.969l-3.717,3.716c-0.899-0.294-4.908-0.294-5.809,0l-3.716-3.716 C9.395,64.924,9.894,67.877,10.325,69.247z"></path></g></svg>
<div id="count">
<span id='text'>Connections:</span>
<span>17,000,345</span>
</div>
</div>
<ul class="sidebar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Businesses</a></li>
<li><a href="#">Export</a></li>
<li><a href="#">Logout</a></li>
</ul>
<div class="logo-box">
<img id=logo src="static/img/M.png" alt="">
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class='col-lg-12'>
<a href="#" class="btn btn-success" id="menu-toggle">Toggle Sidebar</a>
</div>
</div>
</div>
</div>
</div>
<script>
$("#menu-toggle").click( function (e){
e.preventDefault()
$("#wrapper").toggleClass("menuDisplayed")
});
</script>
<script>
var enterHandler = function(){
$("#count").show();
$("#vis-logo").hide();
};
var leaveHandler = function(){
$("#count").hide();
$("#vis-logo").show();
};
$("#innermost-circle").hover(enterHandler, leaveHandler);
</script>
<script>
var enterHandler = function(){
$("#vis-logo").hide();
$("#count").show();
};
var leaveHandler = function(){
$("#vis-logo").show();
$("#count").hide();
};
$("#vis-logo").hover(enterHandler, leaveHandler);
</script>
{% endblock %}
My CSS:
/* Main */
#wrapper {
max-width: 100%;
max-height: 100%;
}
/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: absolute;
background-color: rgba(0, 0, 160, 0.9);
width: 0;
height: 100%;
overflow-y: hidden;
border: 2px solid #00d7b9;
}
/* Main content */
#page-content-wrapper {
max-width: 100%;
max-height: 100%;
}
.row {
background-color: white;
}
#page-content-wrapper .col-lg-12 {
border-radius: 10px;
width: 100%;
height: 100%;
background-color: gainsboro;
position: absolute;
margin: 10px;
padding: 15px;
border: 3px solid gray;
max-width: 90%;
max-height: 90%;
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper{
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper{
padding-left: 250px;
}
/* Sidebar styling */
.sidebar-nav {
padding: 0;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: honeydew;
}
.sidebar-nav li a:hover{
background: #8080cf;
}
/* nav-bar header */
.header-bar-wrapper {
color:rgba(0, 0, 160, 1);
background-color: rgba(0, 215, 185, 1);
text-align: center;
font-weight: 600;
}
/* Counts */
#outer-ring {
height: 150px;
width: 150px;
display: block;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
stroke: white!important;
color: white!important;
-webkit-animation: clockwiseSpin 36s infinite linear;
}
@-webkit-keyframes clockwiseSpin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
#outer-ring ellipse {
fill: white;
rx: 1.5px;
ry: 1.5px;
}
#inner-ring {
height: 124px;
width: 124px;
position: absolute;
display: block;
fill: white;
stroke: none;
margin: auto;
margin-top: 10px;
top: 37px;
left: 0;
right: 0;
text-align: center;
-webkit-animation: antiClockwiseSpin 28s infinite linear;
}
@-webkit-keyframes antiClockwiseSpin {
from {
-webkit-transform: rotate(359deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#innermost-circle {
position: absolute;
display: block;
fill: rgba(0, 215, 185, 1);
height: 120px;
width: 120px;
opacity: 0.7;
left: 0;
right: 0;
margin: auto;
text-align: center;
margin-top: 10px;
top: 39px;
}
#vis-logo {
position: absolute;
display: block;
fill: rgba(255, 255, 255, 1);
height: 70px;
width: 70px;
left: 0;
right: -5px;
margin: auto;
text-align: center;
margin-top: 10px;
top: 58px;
}
#count {
position: absolute;
text-align: center;
margin: 0;
position: absolute;
top: 12.5%;
left: 50%;
transform: translate(-50%, -50%);
}
#count span {
color: white;
display: inline-block;
opacity: 1;
}
#logo {
height: 50px;
width: 50px;
position: absolute;
text-align: center;
margin: 0;
position: absolute;
bottom: 12.5%;
left: 50%;
transform: translate(-50%, -50%);
}
Upvotes: 0
Views: 592
Answers (1)
Prabin Poudel
Reputation: 349
I was too lazy to check and go through your code :D
Check this out from w3schools about side navs, I believe this should solve your problem, let me know if you have any further questions or need any help, I will be glad to help you.
https://www.w3schools.com/howto/howto_js_sidenav.asp
Basically if you use flexbox then you should be able to control the overflow of the sidenav and put scrollbar there. But above link should be good enough to understand the sidenav you are trying to fix.
UPDATE 1:
This was the minimum code I could do for you to show you the use of flexbox for controlling the width of the page and elements inside.
I have added width to sidemenu so it takes fixed width and for remaining content I have added property flex: 1 so it takes the remaining space that is left after sidemenu has occupied the given width.
html,
body {
height: 100%;
}
.app-container {
display: flex;
height: 100%;
flex-direction: column;
}
.app {
display: flex;
height: 100%;
}
.app-content {
display: flex;
flex: 1;
padding: 1em 1em;
overflow: auto;
flex-direction: column;
}
.menu-icon {
font-size: 1.3em;
width: 1.3em;
margin-right: 1em;
margin-top: 0.3em;
text-align: center;
}
.side-menu {
overflow-y: auto;
overflow-x: hidden;
align-items: flex-start;
flex-direction: column;
padding: 0.5em;
height: 100%;
width: 200px;
transition: width 0.4s;
background-color: grey;
}
.menu-icon {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
margin-left: 0.1em;
font-size: 1.3em;
width: 1.3em;
text-align: center;
}<div class="app-container">
<div class="app">
<section class="sidebar-section">
<div class="side-menu">
<div class="menu-icon">
menu 1
</div>
<div class="menu-icon">
menu 2
</div>
<div class="menu-icon">
menu 3
</div>
</div>
</section>
<div class="app-content">
body content
</div>
</div>
</div>Upvotes: 1
Related Questions
- Sidebar getting pushed down
- Overflow issue in a fixed position sidebar
- How can I extend my sidebar throughout the entire length of the page?
- Stretch the sidebar to full height of the page
- Fixed sidebar with overflow
- How to make a sidebar that stretches to the page length?
- how to expand my side bar the length of my content?
- My sidebar pushes my whole website down
- Left sidebar cut off by browser window
- Sidebars fill up all available space