2

Tenho uma parte do meu sistema que receberá requisições e cada nova requisição que chega, o sistema vai criando uma lista, o formato é praticamente igual a um "submenu" o problema é que quando tenho 5 requisições ou mais, as próximas não aparecem na tela, precisaria de uma barra de rolagem pra ver todas, porém eu coloquei a propriedade overflow: scroll e apareceu até a barra de rolagem, o problema é que ela está "disabled", aparece porém não rola, o que pode ser isso? Os codigos são bem extensos pra postar aqui.

<!-- 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;
}

Ainda existe o arquivo bootstrap com mais códigos CSS, porém é muito extenso.

3
  • Descobri que se eu colocar a propriedade "max-height" junto da propriedade "overflow", a barra de rolagem funciona corretamente, agora o problema é que seu colocar "max-height: 100%" fica uma listinha bem pequena, mostrando apenas 1 linha, ai se eu colocar "max-height: 1315%" a lista fica do tamanho da tela, pq isso está acontecendo agora? Commented 18/05/2017 às 16:49
  • Tenta height: 100vh. Commented 18/05/2017 às 18:40
  • Boa dica Leon, funcionou perfeitamente agora. Vlw! Commented 19/05/2017 às 1:31

1 Resposta 1

0

Você precisa colocar a propriedade height em ul também.

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

Até mais.

3
  • Agradeço pela ajuda Eduardo! Colocando tanto a propriedade height como a propriedade max-height, acontece o seguinte problema: Se eu colocar height: 100%, ao inves de ficar do tamanho da tela, fica bem pequeno, algo como 20px, pra ficar do tamanho da tela, preciso colocar height: 1315%. Alguma dica? Commented 18/05/2017 às 16:51
  • Duas soluções desse post (stackoverflow.com/questions/7357818/100-screen-height-css). Ou você coloca 100% height em algum elemento pai ou colocar height: 100vh, que é uma outra unidade. Commented 18/05/2017 às 17:05
  • Obrigado pela dica Eduardo, usando o 100vh funcionou. Vlw! Commented 19/05/2017 às 1:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .