Boostrap 4 Navbar с размещением ввода/значка поиска (абсолютное положение) не работает, когда я меняю максимальную высоту и переполнение-y

Я пытаюсь заставить поисковый ввод со встроенным значком поиска работать в навигационной панели Bootstrap 4, когда отображается мобильное меню. Ниже моя версия Boostrap 3, которая работала довольно легко...

У меня очень длинное «мобильное» меню из-за характера приложения, поэтому я хочу применить максимальную высоту и переполнение к сворачиванию панели навигации, чтобы оно не покрывало весь экран.

Однако, когда я применяю эти стили в Boostrap 4, мой значок поиска не остается «внутри» ввода:

Стили, которые я применил к входным данным поиска:

<div class = "has-search">
    <span class = "fa fa-search form-control-feedback execute-quick-search"></span>
    <input type = "text" class = "form-control quick-search" placeholder = "Quick Search">
</div>

.has-search .form-control {
  padding-right: 2.375rem;
}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  right: 1.1875rem;
}

Я могу заставить значок поиска оставаться внутри ввода, если применю стили max-height/overflow-y ко всему элементу .navbar. Но это не тот внешний вид, к которому я стремлюсь, и, что еще хуже, он позволяет прокручивать мобильный togglerButton за пределы экрана. Я сделал скрипку, которая воспроизводит ошибку.

Скрипка

css twitter-bootstrap bootstrap-4 css-position navbar

04.02.2019 16:24

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

378

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте position: relative в has-search. Также применяйте max-height etc к navbar-collapse только в мобильный вид.

См. демо ниже:

.has-search { /* ADDED */
  position: relative;
}

.has-search .form-control {
  padding-right: 2.375rem;
}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  right: 1.1875rem;
}
@media (max-width: 991px) { /* ADDED */
  .navbar-collapse {
    max-height: 150px;
    overflow-y: auto;
  }
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

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

  <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
    <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 = "#">Link</a>
      </li>
      <li class = "nav-item dropdown">
        <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
              Dropdown
            </a>
        <div class = "dropdown-menu" aria-labelledby = "navbarDropdown">
          <a class = "dropdown-item" href = "#">Action</a>
          <a class = "dropdown-item" href = "#">Another action</a>
          <div class = "dropdown-divider"></div>
          <a class = "dropdown-item" href = "#">Something else here</a>
        </div>
      </li>
      <li class = "nav-item">
        <a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true">Disabled</a>
      </li>
    </ul>
    <div class = "has-search">
      <span class = "fa fa-search form-control-feedback execute-quick-search"></span>
      <input type = "text" class = "form-control quick-search" placeholder = "Quick Search">
    </div>
  </div>
</nav>
<h1>Hello, world!</h1>

Вопрос, не лучше ли использовать input-group, чтобы получить вид поля ввода со значком?

— 04.02.2019 17:27

Я хочу, чтобы значок поиска выглядел так, как будто он появляется «внутри» поля ввода, а не стандартный «серый» добавленный значок. Я так понял 'input-group работает.

— 04.02.2019 18:24

04.02.2019 17:06