Загрузочные карточки, выровненные по вертикали, не реагируют

#html #css #angular #bootstrap-4

#HTML #css #угловой #bootstrap-4

Вопрос:

У меня есть 2 карты начальной загрузки друг над другом, но они не реагируют по высоте. Когда я помещаю их в родительский div и присваиваю этому div фиксированную высоту, нижняя карточка с таблицей внутри будет превышать высоту. Чтобы сделать это более понятным, я воспроизвел эту проблему здесь: https://stackblitz.com/edit/bootstrap-8h1b14?file=app/app.component.css

Чего я хочу добиться, так это 2 отзывчивых вертикально выровненных карточки, помещающихся в родительский div, но, похоже, не могу найти правильное решение без жестко запрограммированных вычислений (чего я не хочу).

1. Вы смешиваете карточки и вкладки вместе, серьезно, зачем вы это делаете? В результате вы оборачиваете свою таблицу в 5! divs. Замечательно. Пожалуйста, подумайте о сокращении divs, это может упростить задачу. Если допустимо, что весь allergyWrapper доступен для прокрутки, просто добавьте к overflow-y: auto нему стиль.

2. ну, в моем приложении вкладки действительно функциональны и оформлены, вот почему. Я мог бы решить это таким образом, но я бы предпочел сделать прокручиваемой только таблицу

Ответ №1:

Вам просто нужно создать свой .allergyWrapper гибкий контейнер flex-direction: column; и позволить карте увеличиваться или уменьшаться по мере необходимости.

Следующий css обрабатывает размер карты

 .allergyWrapper{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mycard {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
}

Затем, чтобы прокрутить только тело таблицы, я нашел эту статью полезной. Затем мне пришлось преобразовать строки таблицы в строки flexbox, чтобы заполнить ширину (воссоздав стиль таблицы bs).

 .mycard tbody {
  display: block;
  overflow: auto;
  height: 100%;
  width: 100%;
}
.mycard tr {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
}
.mycard td,
.mycard th {
  flex-grow: 1;
}

Далее

Удалите оболочку таблицы <div style="overflow-y: auto;">
Добавьте .h-100 к каждому из следующих элементов
- table
- div.tab-pane
- div.tab-content

Моя вилка вашего стека

1. После попытки его реализации я заметил, что он прокручивает все содержимое на карте, возможно ли включить прокрутку только в таблице? Я пытался достичь этого с помощью подхода flexbox, но не могу его решить

2. @r0699049 Я обновил свой ответ, чтобы прокрутить только тело таблицы

Ответ №2:

просто укажите overflow-hidden класс в родительском (.allergyWrapper)

https://stackblitz.com/edit/bootstrap-cjaupc?file=app/app.component.html

1. Но затем он отсекает содержимое на нижней карте, чего я, деф, не хочу.

2. если вы зададите фиксированную высоту родительскому элементу, какая-то часть будет вырезана, это факт

3. итак, чего вы хотите?

4. Есть ли способ заставить его поместиться внутри родительского элемента без обрезки? Я использую этот компонент в качестве библиотеки в основном приложении, в этом основном приложении этот компонент находится внутри div с фиксированной высотой (пользователь может выбрать и установить высоту div), поэтому я бы хотел, чтобы он хорошо вписывался в него, не сокращая содержимое

5. поэтому, если содержимое больше вашей фиксированной высоты, сделайте его прокручиваемым