Dropdown menu not stretching vertically
Question
I want to stretch the sidebar vertically when the dropdown is clicked. The height of the sidebar is 100%, so if I click the link or the a tag, the sidebar should stretch.
However, if I click the sidebar the container and the sidebar stays at 100% height and the dropdown goes past the end of the menu.
In the picture there are 4 links as an example, but in the code below I've only added 1 link.
The first image: This is when the links or the a tag is not been click
The second image: This is when the links are already clicked and the sidebar and container does not stretch.
<body>
<!-- SIDERBAR -->
<div class="container">
<div class="sidebar">
<img src="images/1232.png" class="logo">
<h1 class="h1-1">Pacific Sky</h1>
<h1 class="hr-1">___________________________</h1>
<img src="images/sampleimg.png" class="dp">
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
<div class="links">
<br>
<h5 style="color: white; font-size: 2vh;"> GENERAL</h5><br>
<!-- Links -->
<script type="text/javascript" src="js/showhide.js"></script>
<!-- links palatandaan -->
<div class="dashboard" id="dashboard">
<p class="dashboard-color">
<i class="fa fa-podcast" aria-hidden="true" id="dashboardlogo"></i>
DASHBOARD
<i class="fa fa-caret-down okay" aria-hidden="true" id="downlogo"></i></p>
<a href="" class="dashboardlinks"><i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Messages</a>
<a href="" class="dashboardlinks"><i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Pending Reservation</a>
<a href="" class="dashboardlinks"><i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Approved Reservation</a>
</div><br>
</div>
</div>
// showhide
$(document).ready(function(){
$(".dashboard").click(function(){
$("a").slideToggle(400);
});
});
*
{
padding: 0;
margin: 0;
}
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
a
{
color: white;
text-decoration: none;
display: none;
font-family: RobotoT;
}
.container
{
background: linear-gradient(to left bottom, #ccccff 0%, #ffffff 100%);
position: relative;
width: 100%;
height: 100%;
}
.sidebar
{
width: 50vh;
height: 100vh;
position: relative;
background-color: #2A3F54;
}
//and this is the links
.links
{
position: relative;
top: 33%;
color: #e5e6e8;
}
.dashboardlinks
{
font-size: 2.5vh;
line-height: 250%;
text-align: left;
color: #e8eaef;
position: relative;
top: 1vh;
padding-left: 14%;
}
#downlogo
{
position: absolute;
right: 8%;
}
2 answers
solution1
0 2017-10-25 18:53:15
Probably just need to change width to height: (and I'd add html)
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
to
html, body
{
width: 100%;
height: 100%;
font-family: 'Alegreya Sans';
}
solution2
0 2017-10-25 18:54:09
Update .sidebar to this
.sidebar
{
width: 50vh;
min-height: 100vh;
position: relative;
background-color: #2A3F54;
}
https://jsfiddle.net/pmuhnhfo/
I just copy pasted more items in fiddle to make it show the issue
The height 100vh before is restricting it and since you want it to stretch the whole way, just set minimum height
On a side note, you should change
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
to
<p class="welcomemessage">Welcome, <span class="adminname">Dave Spencer</span></p>
I think you originally you had a p tag inside of another p tag
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.