Scrollable sidebar doesn't show all content on mobile devices - html

Question

I've got a sidebar, which displays good on desktop. But on mobile devices it acts strange. (On emulators of mobile devices everything is fine).
Here's some screenshots from mobile. The whole display becomes large and sidebar scrolls just a little, other content of menu is unreachable. It also changes according to left part's size.
screenshot 1
screenshot 2
My html (using bootstrap and angularjs):
<div id="wrapper">
<div class="row">
<nav class="navbar navbar-fixed-top orange-back" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="" class="btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
<a class="no-decoration-link" href="#">STRICS</a>
</div>
</div>
</div>
</nav>
</div>
<div class="row">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav role="navigation">
<ul class="sidebar-nav nav">
<h5 class="nav-group">Расходы и доходы</h5>
<li>Купить материал</li>
<li> Личный кабинет</li>
<li> Выйти</li><br><br>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="view-placement" ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
My css:
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.sidebar-nav {
overflow: scroll;
}
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #FFAB62;
position: fixed;
height: 95%;
overflow-y: auto;
z-index: 1000;
transition: all 0.6s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.6s ease 0s;
padding-right: 4px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 20px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #41484c;
display: block;
text-decoration: none;
padding-left: 20px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.nav>li>a {
padding: 4px 10px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #41484c;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}

Answer 1

Try below code after head tag.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">