Property overflow is not working properly

Asked

Viewed 123 times

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 practically equal to a "submenu" the problem is that when I have 5 requests or more, the next ones do not appear on the screen, would need a scrollbar to see all, but I put the overflow property: scroll and appeared until the scroll bar, the problem is that it is "disabled", appears but does not scroll, what can be this? The codes are very extensive 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 the bootstrap file with more CSS codes, but it is very extensive.

html css

  • I discovered that if I put the property "max-height" next to the property "overflow", the scroll bar works correctly, now the problem is that its put "max-height: 100%" is a very small list, showing only 1 line, ai se eu colocar "max-height: 1315%" the list gets the screen size, because this is happening now?

  • Tries height: 100vh.

  • Good tip Leon, it worked perfectly now. VLW!

1 answer

0


You need to put the property height in ul too.

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

See you around.

  • I appreciate your help, Eduardo! Putting both the property height and the property max-height, the following problem happens: If I put height: 100%, instead of being the size of the screen, it is very small, something like 20px, to stay the size of the screen, I need to put height: 1315%. Any hint?

  • Two solutions of this post (http://stackoverflow.com/questions/7357818/100-screen-height-css). Either you put 100% height on some parent element or put height: 100vh, which is another unit.

  • Thanks for the tip Eduardo, using the 100vh worked. Vlw!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.