Строка Bootstrap с фиксированной максимальной высотой по-прежнему занимает место при переполнении

У меня есть элемент div с цветами — строка Bootstrap с множеством столбцов. Я установил фиксированную максимальную высоту. Несмотря на то, что строка с столбцами выглядит прокручиваемой, она все равно занимает место и выходит далеко за пределы нижнего колонтитула:

Это мой div с цветами:

<script setup>
const props = defineProps({
  filterList: Object,
  ...
})
</script>

<template>
  <section class = "col-3">
    <div class = "mb-3">
      <h3 class = "fs-3">Color</h3>
      <div class = "colors-div row g-3 overflow-y-auto">
          <div class = "col-auto" v-for = "(color, index) in filterList.colors">
            <input type = "checkbox" class = "btn-check" :id = "'color-' + (index + 1)" autocomplete = "off">
            <label class = "btn" :for = "'color-' + (index + 1)" :style = "'background-color: ' + color"></label>
          </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.colors-div {
  max-height: 15em;
}
</style>

Вот песочница с этим вопросом.

Я попытался обернуть его в другой div с помощью display: block и overflow: auto, но конечный результат тот же.

Заранее спасибо!

Вероятно, вам не следует использовать Bootstrap5 с Vue3, поскольку в нем нет части JS.

— 15.06.2024 13:42

Проверьте ui-libs.vercel.app

— 15.06.2024 21:56

@MrUpsidown, я уже использую PrimeVue. Я проверю, есть ли в нем аналогичный компонент. Спасибо!

— 16.06.2024 13:01

vue.js twitter-bootstrap flexbox vuejs3 bootstrap-5

15.06.2024 11:27

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

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

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

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

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

Ответы 1

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

Вы можете изменить свой Filter.vue следующим образом:

<script setup>
const props = defineProps({
  filterList: Object,
  ...
});
</script>

<template>
  <section class = "col-3">
    <div class = "mb-3">
      <h3 class = "fs-3">Color</h3>
      <div class = "colors-div row g-3 overflow-y-auto">
        <span
          class = "col-auto color-tile"
          v-for = "(color, index) in filterList.colors"
        >
          <input
            type = "checkbox"
            class = "color-checkbox"
            :id = "'color-' + (index + 1)"
            autocomplete = "off"
          />
          <div
            class = "btn"
            :for = "'color-' + (index + 1)"
            :style = "'background-color: ' + color"
          />
        </span>
      </div>
    </div>
  </section>
</template>

<style scoped>
.colors-div {
  max-height: 15em;
  /* Center the item */
  display: flex;
  justify-content: center;
}

.color-tile {
  position: relative;
  display: inline;
}

/* place your checkbox in front of the box and make it invisible */
.color-checkbox {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  opacity: 0;
}

.btn {
  /* Don't use absolute width in cases like this, use padding */
  padding: 15px;
  border: 1px solid #ddd;
}

.color-checkbox:focus + .btn {
  border-color: darkorange;
  box-shadow: 0 0 0 0.25rem rgba(204, 54, 0, 0.25);
}

.color-checkbox:checked + .btn {
  border: 2px solid darkorange;
}
</style>

Я добавил несколько комментариев, чтобы вы могли это проверить.

15.06.2024 12:40