Pesquisa
Pesquisa

Minha barra de navegação de topo fixo do Bootstrap não mostrará todos os itens suspensos ao visualizar em uma janela pequena ou em um dispositivo móvel

EDMSM Publicado em Dev
13
EDMSM

Estou tentando criar uma barra de navegação de topo fixo, com vários itens suspensos, mas quando vejo em uma janela pequena ou em um dispositivo móvel, você não consegue ver os itens suspensos inferiores ou rolar para acessá-los.

Eu tentei definir body,html{height:100%;}e html{min-height:100%}, como sugerido em outro post para um problema semelhante, mas não funcionou.

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>

  <body>

  <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  <a class="navbar-brand " href="#">Example</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active mx-2">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown mx-2">
              <a class="nav-link dropdown-toggle" href="#" id="DropDown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link 1</a>
              <div class="dropdown-menu" aria-labelledby="DropDown1">
                <a class="dropdown-item" href="#">Dropdown1</a>
                <a class="dropdown-item" href="#">Dropdown2</a>
                <a class="dropdown-item" href="#">Dropdown3</a>
                <a class="dropdown-item" href="#">Dropdown4</a>
              </div>
            </li>
            <li class="nav-item dropdown mx-2">
              <a class="nav-link dropdown-toggle" href="#" id="DropDown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link2</a>
              <div class="dropdown-menu" aria-labelledby="DropDown2">
                <a class="dropdown-item " href="#">Dropdown1 <span class="sr-only">(current)</span></a>
                <a class="dropdown-item" href="#">Dropdown2</a>
                <a class="dropdown-item" href="#">Dropdown3</a>
                <a class="dropdown-item" href="#">Dropdown4</a>
                <a class="dropdown-item" href="#">Dropdown5</a>
                <a class="dropdown-item" href="#">Dropdown6</a>
                <a class="dropdown-item" href="#">Dropdown7</a>
                <a class="dropdown-item" href="#">Dropdown8</a>
              </div>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link5</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link6</a>
            </li>
          </ul>
        </div>
  </nav>
    <header>
    </header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus quam eros, quis elementum metus suscipit quis. Etiam ultrices pharetra diam, sed tempus mauris tincidunt sit amet. Vivamus vestibulum sollicitudin bibendum. Nam egestas, lectus vitae semper blandit, elit sapien venenatis diam, quis vehicula sem neque vel tellus. Suspendisse nec venenatis metus, ac blandit lacus. Etiam eu velit convallis, auctor turpis eget, faucibus orci. Vestibulum ac justo porta, congue lectus fringilla, sagittis metus. Sed orci velit, placerat eu interdum eget, volutpat in urna. Fusce quis tellus non lorem imperdiet blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Aliquam aliquam commodo nulla, nec porta augue efficitur a. Etiam maximus, ligula vitae feugiat malesuada, magna est ultricies nunc, sit amet efficitur metus metus vel lectus. Nunc eleifend orci nec orci faucibus congue. In sodales pretium tempor. Pellentesque sed risus risus. Aenean vulputate euismod eleifend. Donec vitae tincidunt felis, quis euismod neque. Nam at urna convallis, tincidunt arcu quis, commodo urna. Quisque ultrices interdum erat vel suscipit. Morbi sed ex dignissim, posuere elit ac, sodales est.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nunc dictum ac purus at accumsan. Ut consequat efficitur nisi. Nam tempor, justo at tempus pretium, nunc dolor iaculis magna, eget mattis sapien metus nec neque. Quisque consequat dolor lacus. Fusce vestibulum accumsan arcu eget varius. Suspendisse rutrum elit felis, at bibendum neque sagittis non. Aliquam ut nibh eget mi eleifend congue quis eleifend turpis. Etiam placerat scelerisque enim, ut dictum magna tempor sed. Ut tempus, ante sed vehicula porttitor, justo lectus malesuada est, sed suscipit nisl metus ac lorem. Duis hendrerit sodales risus id laoreet. Aenean quis felis eu diam lobortis gravida. Aenean sem mi, sodales vel dictum eget, malesuada quis lacus.</p>

<p>Phasellus quis augue magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse a sagittis ante. Nunc rutrum lacus imperdiet, varius ipsum ut, tempus dui. Donec vel ligula lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin semper augue ut nisi rutrum, vitae eleifend nisl gravida. Etiam cursus turpis pulvinar, finibus tortor pretium, fringilla libero. Vivamus tempus feugiat orci eget facilisis. Etiam efficitur dapibus porta. Vivamus venenatis leo mauris. Donec eleifend mi a enim sagittis sollicitudin.</p>

<p>Cras sed mollis neque. Nam nibh purus, commodo quis sem in, porta egestas erat. Praesent eleifend venenatis sem, in pulvinar est dignissim in. Mauris nulla augue, laoreet vel tortor at, accumsan pharetra urna. Sed a volutpat metus. Praesent cursus turpis id augue venenatis, nec dapibus tortor molestie. Maecenas tincidunt, velit at tincidunt pretium, purus urna tempor sapien, vitae efficitur nisi sem eu erat. Praesent in ullamcorper turpis. Nullam bibendum mi vel nibh egestas pellentesque.</p>
    </main>
    <footer>
    </footer>
  </body>
</html>

CSS

body { 
    padding-top: 65px; 
}

Incluí um exemplo do código que estou usando no link abaixo.

https://codepen.io/EDMSM/pen/VOXRJo

pessoas 
 .fixed-top {
   max-height: 100vh;
   overflow-y: auto;
   margin-right: -17px;
   padding-right: 17px;
 }

Deve resolver seu problema. (Você pode querer envolvê-lo em uma smconsulta de mídia, mas não é obrigatório, pois não vai quebrar nada no tablet ou desktop).

O 17pxtruque é compensar a largura da barra de rolagem no Chrome e evitar uma barra de rolagem dupla.

A alternativa "limpa" ao 17px "hack" (por falta de um termo melhor) é aplicar uma classe de sua escolha ao <body>abrir o menu e removê-la ao fechar. Esta classe deve evitar <body>que haja uma barra de rolagem enquanto o menu estiver aberto.

Por exemplo, para contornar o mesmo problema exato (mas para modais), o Bootstrap usa .modal-openclasse, que se aplica overflow:hidden; position:fixeda <body>.

Veja como funciona apenas com CSS: 

nav.fixed-top {
   max-height: 100vh;
   overflow-y: auto;
   margin-right: -17px;
   padding-right: 17px;
 }
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  <a class="navbar-brand " href="#">Example</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active mx-2">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown mx-2">
              <a class="nav-link dropdown-toggle" href="#" id="DropDown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link 1</a>
              <div class="dropdown-menu" aria-labelledby="DropDown1">
                <a class="dropdown-item" href="#">Dropdown1</a>
                <a class="dropdown-item" href="#">Dropdown2</a>
                <a class="dropdown-item" href="#">Dropdown3</a>
                <a class="dropdown-item" href="#">Dropdown4</a>
              </div>
            </li>
            <li class="nav-item dropdown mx-2">
              <a class="nav-link dropdown-toggle" href="#" id="DropDown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link2</a>
              <div class="dropdown-menu" aria-labelledby="DropDown2">
                <a class="dropdown-item " href="#">Dropdown1 <span class="sr-only">(current)</span></a>
                <a class="dropdown-item" href="#">Dropdown2</a>
                <a class="dropdown-item" href="#">Dropdown3</a>
                <a class="dropdown-item" href="#">Dropdown4</a>
                <a class="dropdown-item" href="#">Dropdown5</a>
                <a class="dropdown-item" href="#">Dropdown6</a>
                <a class="dropdown-item" href="#">Dropdown7</a>
                <a class="dropdown-item" href="#">Dropdown8</a>
              </div>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link5</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link6</a>
            </li>
          </ul>
        </div>
  </nav>
    <header>
    </header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus quam eros, quis elementum metus suscipit quis. Etiam ultrices pharetra diam, sed tempus mauris tincidunt sit amet. Vivamus vestibulum sollicitudin bibendum. Nam egestas, lectus vitae semper blandit, elit sapien venenatis diam, quis vehicula sem neque vel tellus. Suspendisse nec venenatis metus, ac blandit lacus. Etiam eu velit convallis, auctor turpis eget, faucibus orci. Vestibulum ac justo porta, congue lectus fringilla, sagittis metus. Sed orci velit, placerat eu interdum eget, volutpat in urna. Fusce quis tellus non lorem imperdiet blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Aliquam aliquam commodo nulla, nec porta augue efficitur a. Etiam maximus, ligula vitae feugiat malesuada, magna est ultricies nunc, sit amet efficitur metus metus vel lectus. Nunc eleifend orci nec orci faucibus congue. In sodales pretium tempor. Pellentesque sed risus risus. Aenean vulputate euismod eleifend. Donec vitae tincidunt felis, quis euismod neque. Nam at urna convallis, tincidunt arcu quis, commodo urna. Quisque ultrices interdum erat vel suscipit. Morbi sed ex dignissim, posuere elit ac, sodales est.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nunc dictum ac purus at accumsan. Ut consequat efficitur nisi. Nam tempor, justo at tempus pretium, nunc dolor iaculis magna, eget mattis sapien metus nec neque. Quisque consequat dolor lacus. Fusce vestibulum accumsan arcu eget varius. Suspendisse rutrum elit felis, at bibendum neque sagittis non. Aliquam ut nibh eget mi eleifend congue quis eleifend turpis. Etiam placerat scelerisque enim, ut dictum magna tempor sed. Ut tempus, ante sed vehicula porttitor, justo lectus malesuada est, sed suscipit nisl metus ac lorem. Duis hendrerit sodales risus id laoreet. Aenean quis felis eu diam lobortis gravida. Aenean sem mi, sodales vel dictum eget, malesuada quis lacus.</p>

<p>Phasellus quis augue magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse a sagittis ante. Nunc rutrum lacus imperdiet, varius ipsum ut, tempus dui. Donec vel ligula lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin semper augue ut nisi rutrum, vitae eleifend nisl gravida. Etiam cursus turpis pulvinar, finibus tortor pretium, fringilla libero. Vivamus tempus feugiat orci eget facilisis. Etiam efficitur dapibus porta. Vivamus venenatis leo mauris. Donec eleifend mi a enim sagittis sollicitudin.</p>

<p>Cras sed mollis neque. Nam nibh purus, commodo quis sem in, porta egestas erat. Praesent eleifend venenatis sem, in pulvinar est dignissim in. Mauris nulla augue, laoreet vel tortor at, accumsan pharetra urna. Sed a volutpat metus. Praesent cursus turpis id augue venenatis, nec dapibus tortor molestie. Maecenas tincidunt, velit at tincidunt pretium, purus urna tempor sapien, vitae efficitur nisi sem eu erat. Praesent in ullamcorper turpis. Nullam bibendum mi vel nibh egestas pellentesque.</p>
    </main>
    <footer>
    </footer>

Veja-o rodando com JS e CSS (sem 17pxhack):

$('.navbar-toggler').on('click tap', function(){
  const expanded = $(this).attr('aria-expanded') === 'false';
  $('body').toggleClass('modal-open', expanded);
});
nav.fixed-top {
   max-height: 100vh;
   overflow-y: auto;
 }
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  <a class="navbar-brand " href="#">Example</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active mx-2">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown mx-2">
              <a class="nav-link dropdown-toggle" href="#" id="DropDown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link 1</a>
              <div class="dropdown-menu" aria-labelledby="DropDown1">
                <a class="dropdown-item" href="#">Dropdown1</a>
                <a class="dropdown-item" href="#">Dropdown2</a>
                <a class="dropdown-item" href="#">Dropdown3</a>
                <a class="dropdown-item" href="#">Dropdown4</a>
              </div>
            </li>
            <li class="nav-item dropdown mx-2">
              <a class="nav-link dropdown-toggle" href="#" id="DropDown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link2</a>
              <div class="dropdown-menu" aria-labelledby="DropDown2">
                <a class="dropdown-item " href="#">Dropdown1 <span class="sr-only">(current)</span></a>
                <a class="dropdown-item" href="#">Dropdown2</a>
                <a class="dropdown-item" href="#">Dropdown3</a>
                <a class="dropdown-item" href="#">Dropdown4</a>
                <a class="dropdown-item" href="#">Dropdown5</a>
                <a class="dropdown-item" href="#">Dropdown6</a>
                <a class="dropdown-item" href="#">Dropdown7</a>
                <a class="dropdown-item" href="#">Dropdown8</a>
              </div>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link4</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link5</a>
            </li>
            <li class="nav-item mx-2">
              <a class="nav-link" href="#">Link6</a>
            </li>
          </ul>
        </div>
  </nav>
    <header>
    </header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus quam eros, quis elementum metus suscipit quis. Etiam ultrices pharetra diam, sed tempus mauris tincidunt sit amet. Vivamus vestibulum sollicitudin bibendum. Nam egestas, lectus vitae semper blandit, elit sapien venenatis diam, quis vehicula sem neque vel tellus. Suspendisse nec venenatis metus, ac blandit lacus. Etiam eu velit convallis, auctor turpis eget, faucibus orci. Vestibulum ac justo porta, congue lectus fringilla, sagittis metus. Sed orci velit, placerat eu interdum eget, volutpat in urna. Fusce quis tellus non lorem imperdiet blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Aliquam aliquam commodo nulla, nec porta augue efficitur a. Etiam maximus, ligula vitae feugiat malesuada, magna est ultricies nunc, sit amet efficitur metus metus vel lectus. Nunc eleifend orci nec orci faucibus congue. In sodales pretium tempor. Pellentesque sed risus risus. Aenean vulputate euismod eleifend. Donec vitae tincidunt felis, quis euismod neque. Nam at urna convallis, tincidunt arcu quis, commodo urna. Quisque ultrices interdum erat vel suscipit. Morbi sed ex dignissim, posuere elit ac, sodales est.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nunc dictum ac purus at accumsan. Ut consequat efficitur nisi. Nam tempor, justo at tempus pretium, nunc dolor iaculis magna, eget mattis sapien metus nec neque. Quisque consequat dolor lacus. Fusce vestibulum accumsan arcu eget varius. Suspendisse rutrum elit felis, at bibendum neque sagittis non. Aliquam ut nibh eget mi eleifend congue quis eleifend turpis. Etiam placerat scelerisque enim, ut dictum magna tempor sed. Ut tempus, ante sed vehicula porttitor, justo lectus malesuada est, sed suscipit nisl metus ac lorem. Duis hendrerit sodales risus id laoreet. Aenean quis felis eu diam lobortis gravida. Aenean sem mi, sodales vel dictum eget, malesuada quis lacus.</p>

<p>Phasellus quis augue magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse a sagittis ante. Nunc rutrum lacus imperdiet, varius ipsum ut, tempus dui. Donec vel ligula lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin semper augue ut nisi rutrum, vitae eleifend nisl gravida. Etiam cursus turpis pulvinar, finibus tortor pretium, fringilla libero. Vivamus tempus feugiat orci eget facilisis. Etiam efficitur dapibus porta. Vivamus venenatis leo mauris. Donec eleifend mi a enim sagittis sollicitudin.</p>

<p>Cras sed mollis neque. Nam nibh purus, commodo quis sem in, porta egestas erat. Praesent eleifend venenatis sem, in pulvinar est dignissim in. Mauris nulla augue, laoreet vel tortor at, accumsan pharetra urna. Sed a volutpat metus. Praesent cursus turpis id augue venenatis, nec dapibus tortor molestie. Maecenas tincidunt, velit at tincidunt pretium, purus urna tempor sapien, vitae efficitur nisi sem eu erat. Praesent in ullamcorper turpis. Nullam bibendum mi vel nibh egestas pellentesque.</p>
    </main>
    <footer>
    </footer>

Nota: Neste caso particular, eu recomendo a solução CSS, por vários motivos, mas principalmente porque o JS cria um pequeno salto na largura do menu ao abrir / fechar em determinados combos de navegador + SO, o que é bastante difícil de corrigir sem afetar outros combos .

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    UITextView não está exibindo texto longo

  3. 3

    Dependência circular de diálogo personalizado

  4. 4

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  5. 5

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  6. 6

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  7. 7

    Setas rotuladas horizontais apontando para uma linha vertical

  8. 8

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  9. 9

    Definir um clipe em uma trama nascida no mar

  10. 10

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  11. 11

    Como dinamizar um Dataframe do pandas em Python?

  12. 12

    regex para destacar novos caracteres de linha no início e no fim

  13. 13

    Why isn't my C# .Net Core Rest API route finding my method?

  14. 14

    Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

  15. 15

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  16. 16

    How to create dynamic navigation menu select from database using Codeigniter?

  17. 17

    Como recuperar parâmetros de entrada usando C #?

  18. 18

    Changing long, lat values of Polygon coordinates in python

  19. 19

    Livros sobre criptografia do muito básico ao muito avançado

  20. 20

    Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

  21. 21

    Pesquisa classificada, conte números abaixo do valor desejado

quentelabel

Arquivo