Bootstrap ошибки ввода пользовательских файлов при переполнении панели навигации - PullRequest
Новая
       5

Bootstrap ошибки ввода пользовательских файлов при переполнении панели навигации

0 голосов
/ 26 февраля 2020

Я кодировал навигационную панель с фиксированным верхом.

Когда я прокручиваю, если через него проходит содержимое тела, оно должно быть скрыто. Это работает, но когда я использую пользовательский класс bootstrap для полей файлов, возникает ошибка. Поле файла не скрывается, когда оно перекрывает панель навигации.

Я воспроизвел проблему здесь:

html

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            </ul>
        </div>
    </nav>

<!-- Bootstrap custom file input -->
<div class="container">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01"
           aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>

css

html, body{
          padding-top: 30px;
      }
      .navbar {
        overflow: hidden;
        background-color: black;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
      }

      .navbar .bg-primary{
        border: 1px solid black;
      }

И демоверсия: https://jsfiddle.net/kiuega/u3z8be4c/3/

Знаете ли вы, в чем проблема?

РЕДАКТИРОВАТЬ : Я только что заметил, что то же самое произошло, когда мы используем FullCalendar (https://fullcalendar.io/docs), это то же самое!

1 Ответ

2 голосов
/ 26 февраля 2020

Измените навигатор "z-index" на 2 или более. Лучше сделать z-index равным 9999 (Extreme Value), что означает, что он всегда находится наверху содержимого .. в противном случае, если есть какой-либо другой div или раздел, который имеет больший z-индекс, чем панель навигации, чем этот раздел или раздел перекрывают панель навигации .. 

.navbar {
    overflow: hidden;
    background-color: black;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
  }
...