Overflow property is not working correctly

2

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.

    
asked by anonymous 18.05.2017 / 18:28

1 answer

0

You need to put the height property in ul as well.

ul {
  overflow: scroll;
  height: 200px;
}

See you later.

    
18.05.2017 / 18:46