У меня есть сворачиваемая боковая панель с двумя вкладками на моей странице angularjs, но она не работает. Прокрутка не видна при переполнении. Требование - это полоса прокрутки, которая не видна при переполнении боковой панели. Я дал ширину полосы прокрутки для автоматического и переполнения-y для прокрутки, но не работает. Кто-нибудь знает, как это сделать?
Вот мой код:
CSS
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/*margin-top: 57px;*/
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
/* disini agar ketika di kecilkan tidak hilang semua default 0*/
height: auto;
margin-left: -250px;
overflow-y: hidden;
/* overflow-y: auto, changed to Hidden By VIKAS GAYAKWAD */
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
/*width: 100%;*/
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
.fixed-brand {
width: auto;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
height: 100%;
top: 0;
width: 250px;
overflow-y: scroll;
margin: 0;
padding: 0;
list-style: none;
margin-top: 2px;
}
.sidebar-nav li {
text-indent: 15px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
border-left: red 2px solid;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.no-margin {
margin: 0;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
.fixed-brand {
width: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-2 #sidebar-wrapper {
width: 50px;
}
#wrapper.toggled-2 #sidebar-wrapper:hover {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
padding-left: 250px;
}
#wrapper.toggled-2 #page-content-wrapper {
position: relative;
margin-right: 0;
margin-left: -200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
.media-body {
height: 100%;
padding: 4px;
/*margin-top: 5px;*/
/*background:green;*/
}
.media.contact-card {
font-size: 11px;
padding: 5px;
border-bottom: 1px solid #3071a9;
/*color: lightcyan;*/
}
.hr {
border-bottom: 1px solid #e1e1e1;
}
/*slider tab end*/
/* Scrollbar */
.scrollbar {
overflow-y: scroll;
height: auto;
}
Html
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="" ui-sref=".client"> <i class="glyphicon glyphicon-plus"></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="scrollbar">
<!--Start SCROLL BAR, Div Added/Edited by VIKAS GAYAKWAD -->
<div class="hr"></div>
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
<!--End SCROLL BAR--->
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div ng-repeat="client in clientList">
{{client.firstName}} {{client.lastName}}
</div>
</div>
</tab>
</tabset>
Вы не установили max-height
для полосы прокрутки. И нет содержимого внутри элемента .scrollbar
.
Ваш css для .scrollbar
должен выглядеть следующим образом:
.scrollbar {
overflow-y: scroll;
height: auto;
max-height: 400px;
}
Для отображения полосы прокрутки добавьте следующее:
.media-list {
height: 450px;
}
Примечание. Последнее не обязательно, если у вас есть добавленное содержимое, это просто для того, чтобы показать, что пустой div не отображает полосу прокрутки.
Основная проблема заключается в том, что scrollbar- <div>
не имеет видимого содержимого, кроме <hr>
.
Поскольку он пуст, за исключением некоторых неподдерживаемых (?) HTML-тегов, он будет отображаться как короткая серая полоса прокрутки (просто нечего прокручивать).
Кроме того, когда вы не устанавливаете высоту scroll- <div>
, полоса прокрутки будет бесполезна, так как DIV
растягивается вместе с содержимым.
<hr>
и пустому / недействительному <ul>
<hr>
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
если это сгенерирует содержимое.