CODEWITHSUNDEEP
htmlcssangularbootstrap-4
r0699049
r0699049

Reputation: 93

Bootstrap cards aligned vertically not responsive

I have 2 bootstrap cards above each other, but they are not responsive in height. When I put them in a parent div and give that div a fixed height, the lower card with the table inside will exceed the height. To make this more clear I've reproduced this issue here: https://stackblitz.com/edit/bootstrap-8h1b14?file=app/app.component.css

What I want to achieve is 2 responsive vertically aligned cards fitting in the parent-div, but can't seem to find the right solution without hardcoded calculations (which I do not want).

Upvotes: 0

Views: 1077

Answers (2)

Arleigh Hix
Arleigh Hix

Reputation: 10877

You simply need to make your .allergyWrapper a flex container with flex-direction: column; and allow the card to grow or shrink as needed.

The following css handles the card sizing

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

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

Then to get just the table body to scroll, I found this article to be helpful. Then I had to make the table rows into flexbox rows to fill the width (recreating bs table style).

.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;
}

Next

  • Remove the table wrapper <div style="overflow-y: auto;">
  • Add .h-100 to each of the following elements
    • table
    • div.tab-pane
    • div.tab-content

My fork of your stack

Upvotes: 2

Nisharg Shah
Nisharg Shah

Reputation: 19552

just give the overflow-hidden class in the parent (.allergyWrapper)

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

Upvotes: 0

Related Questions