I have a part of my system that will receive requests and each new request that arrives, the system will create a list, the format is almost equal to a "submenu" the problem is that when I have 5 requests or more, the next on the screen, I would need a scroll bar to see all of them, however I put the property overflow: scroll and it appeared until the scroll bar, the problem is that it is disabled, it appears but does not scroll, what can be this ? The code is too long to post here.
<!-- INICIO DO HEADER HORIZONTAL -->
<nav class="navbar navbar-default navbar-fixed-top" style="margin-left: 300px; min-height: 40px; height: 41px;">
<div class="container-fluid" style="background-color: rgb(49, 50, 64);">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li style="height: 45px; margin-top: -5px;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="height: 45px;">
<span>Requisições</span><i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-cart" role="menu" style="overflow: scroll;">
<li>
<span class="item">
<span class="item-left">
<span class="item-info">
<span> <b>Paciente:</b> Lorem Ipsum </span>
<span> <b>Requisição N°:</b> 220 </span>
<span> <b>Atendimento N°:</b> 4933 </span>
<span> <b>Setor Solicitante:</b> Emergência </span>
</span>
</span>
</span>
<hr style="margin: 10px;">
<span class="item">
<span class="item-left">
<span class="item-info">
<span> <b>Paciente:</b> Lorem Ipsum </span>
<span> <b>Requisição N°:</b> 221 </span>
<span> <b>Atendimento N°:</b> 6052 </span>
<span> <b>Setor Solicitante:</b> Ambulatorial </span>
</span>
</span>
</span>
<hr style="margin: 10px;">
<span class="item">
<span class="item-left">
<span class="item-info">
<span> <b>Paciente:</b> Lorem Ipsum </span>
<span> <b>Requisição N°:</b> 221 </span>
<span> <b>Atendimento N°:</b> 6052 </span>
<span> <b>Setor Solicitante:</b> Ambulatorial </span>
</span>
</span>
</span>
<hr style="margin: 10px;">
<span class="item">
<span class="item-left">
<span class="item-info">
<span> <b>Paciente:</b> Lorem Ipsum </span>
<span> <b>Requisição N°:</b> 221 </span>
<span> <b>Atendimento N°:</b> 6052 </span>
<span> <b>Setor Solicitante:</b> Ambulatorial </span>
</span>
</span>
</span>
<hr style="margin: 10px;">
<span class="item">
<span class="item-left">
<span class="item-info">
<span> <b>Paciente:</b> Lorem Ipsum </span>
<span> <b>Requisição N°:</b> 221 </span>
<span> <b>Atendimento N°:</b> 6052 </span>
<span> <b>Setor Solicitante:</b> Ambulatorial </span>
</span>
</span>
</span>
<hr style="margin: 10px;">
<span class="item">
<span class="item-left">
<span class="item-info">
<span> <b>Paciente:</b> Lorem Ipsum </span>
<span> <b>Requisição N°:</b> 222 </span>
<span> <b>Atendimento N°:</b> 9844 </span>
<span> <b>Setor Solicitante:</b> Ambulatorial </span>
</span>
</span>
</span>
<hr style="margin: 10px;">
</li>
<!--<li class="divider"></li>-->
<li><a class="text-center" href="">Ver Todas</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
/* INCIO DO HEADER HORIZONTAL */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
color: white;
background-color: rgb(52, 63, 72);
height: 45px;
}
ul.navbar-right li a span {
color: lightgray;
}
ul.navbar-right li a i {
color: white;
margin-left: 5px;
}
ul.navbar-right li a:hover span, ul.navbar-right:hover li a i {
color: black;
-webkit-transition:all 0.15s linear;
-moz-transition:all 0.15s linear;
-o-transition:all 0.15s linear;
transition:all 0.15s linear;
}
ul.dropdown-cart li .item {
width: 280px;
display:block;
padding: 0px;
}
ul.dropdown-cart li .item:hover {
background-color:#f3f3f3;
}
ul.dropdown-cart li .item:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.dropdown-cart li .item-left {
float:left;
}
ul.dropdown-cart li .item-left img, ul.dropdown-cart li .item-left span.item-info {
float:left;
}
ul.dropdown-cart li .item-left span.item-info {
margin-left:10px;
}
ul.dropdown-cart li .item-left span.item-info span {
display:block;
}
ul.dropdown-cart li .item-right {
float:right;
}
ul.dropdown-cart li .item-right button {
margin-top:14px;
}
There is still a bootstrap file with more CSS codes, but it is very extensive.