Vertical alignment of Bootstrap cards without responsiveness

I am facing an issue with two Bootstrap cards stacked vertically but not being responsive in height. When I place them inside a parent div with a fixed height, the lower card containing a table exceeds the set height. To better illustrate this problem, I have created a sample here: https://stackblitz.com/edit/bootstrap-8h1b14?file=app/app.component.css

My goal is to have two vertically aligned responsive cards that fit within the parent div without resorting to hardcoding calculations. I'm struggling to find the ideal solution.

htmlcssangularbootstrap-4

Answer №1

To achieve the desired layout, simply convert your .allergyWrapper into a flex container with flex-direction: column; and allow the card to adjust its size accordingly.

The following CSS code manages the sizing of the card:

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

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

If you want only the table body to scroll, you can refer to this article for guidance on turning table rows into flexbox rows to fill the width like bootstrap 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 Steps:

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

Check out my version using your stack on StackBlitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I utilize ajax to transmit data to a PHP file and then display the contents of this file within a div utilizing the

This is the script I am using for ajax: var cid = $(this).data('cid'); var sendData = { canidtoset: cid }; $.ajax({ url: '/functions/cv_showinformation.php', type: 'post', data: sendData, dataType: 'json ...

phpjqueryhtmlajax

The interactivity of AngularJS and Canvas seems to be malfunctioning in response

Currently working on a prototype using AngularJS 1.6, I am faced with the challenge of integrating an HTML5 Canvas to represent a data model containing an array of players. I have successfully implemented the canvas functionality like a videogame, with lo ...

javascriptangularjshtmlcanvas

Create a copy of a JQuery slider

Hello there, I'm a first time poster but have been reading for a while now. I've been working on creating a simple jQuery Slider and I'm facing an issue... I want to create a slider that utilizes minimal jQuery and can be easily duplicated o ...

jqueryhtmlcssslider

Why does the DropDownList consistently remove the initial value?

I am currently in the process of developing a recipe website focused on meals. I have created an admin panel where I can manage the meals added to the site. One issue I am facing is with deleting a meal that was previously added. The menu displays the numb ...

c#htmlcssasp.net

What is the best way to design a white arrow with a subtle touch of grey outlining?

Question: I am interested in creating a left-pointing arrow with a grey border. Currently, I have only managed to create a grey arrow without a border. Is there any way I can achieve this? Attached is a picture to illustrate what I'm looking for. An ...

htmlcss

How do I convert the object value/data to lowercase in JavaScript using underscore for an HTML5 document?

I am working with an array of objects (arr) where each object consists of 3 properties (Department, Categories, ProductTypes). The values for these properties are a mix of upper and lower case. To perform a comparison between arr and a search filter (alrea ...

javascriptarrayshtmlunderscore.jslowercase

Visual Latency when Quickly Toggling Between Images in Succession

I have a series of 50 images that need to be displayed sequentially inside a div. The time interval between displaying each image is initially set at 750 milliseconds and decreases with each subsequent image. To ensure all images are loaded before the an ...

javascriptjqueryhtmlcssimage

Deselect a checkbox by selecting a radio button with just Javascript code

Hey there! I'm currently delving into the world of pure JavaScript and could really use some guidance on a particular issue. Here's what I'm aiming to accomplish: I'd like to design a checkbox that triggers the opening of a window whe ...

javascripthtmlcss

Resize images to perfectly fit dimensions of your choice

After conducting thorough research and experimenting with various jQuery and Javascript solutions, I was unable to find a way to dynamically scale images both horizontally and vertically to a specific size while maintaining their aspect ratio. In my parti ...

phphtmldynamicscaleaspect-ratio

The Bootstrap table is not adhering to the specified width when the display is set

I encountered an issue starting yesterday. I am utilizing Bootstrap 4 and tables. Whenever I set a width greater than 13.5vw, the table does not adjust accordingly. You can view the fiddle here Below is the code snippet: HTML <table cl ...

htmlcsstwitter-bootstrap

How can I create a rectangular border around text using the HTML5 canvas?

How can I dynamically draw fitted rectangles around text labels (person's full name) without fixed sizes, taking into account that the labels vary in lengths? Below is the code used to draw the text labels: var ctx = document.getElementById('ma ...

javascripthtmlcanvas

Angular Route Authorities is a powerful tool for managing permissions

In my routes, I have a specific path: {path: 'Demands/:id', component: EditDemandesComponent}. This path allows me to edit demands. However, I've noticed that if the ID does not belong to one of my demands, I am still able to access the path ...

angulartypescriptsecurityroutes

Instructions on creating the effect of rainwater cascading over text and spilling onto a webpage

Is it possible to make the rain flow over my text? Below is the code snippet from my JSFiddle: function strop(cleft, ctop, d) { var drop = document.createElement('div'); drop.className = 'punct'; drop.style.left = cleft + & ...

javascripthtmlcss

I am struggling to increase the width of my input bar and center-align it

Below is the CSS class I've created to ensure that all elements remain centered on the user's screen. container: { display: "flex", position: "absolute", top: 0, left: 0, height: "100%&qu ...

htmlcssmaterial-ui

Investigating the Angular signals that triggered the effect

Is there a way to determine which Angular signal triggered an effect? I have two signals and one effect in a component. One signal is used to start a timer function within a service, while the other signal reacts to changing conditions in the timer functio ...

angularsignalsangular-signals

Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch. My goal is to design a mobile-style menu that can also be displayed on desktop screens. To achieve this, I have used jQuery to implement the sliding effect. You can view a ...

jqueryhtmlcsswordpress

Adding a backslash in Angular: Tips and Tricks

I have a question about adding a backslash to a string that is returned from a div, for example Car1 \sold. Although I am able to retrieve the status, I am having trouble adding the backslash. Here is what I have tried so far: <span>{{addBackl ...

javascriptangularjshtmlangulartypescript

JQuery - stylish vertical accordion navigation menu

I'm currently working on a vertical accordion-style sidebar navigation system. Everything seems to be functioning properly, but I've encountered some issues with the icons that I'm using from Twitter Bootstrap 3. You can view the code on th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Exploring the dimensions of checkboxes in Fluent UI Northstar

Is there a specific method for controlling the size of checkboxes in Fluent UI Northstar? My attempts to modify the font size and height have only impacted the label, not the checkbox itself. Unfortunately, I couldn't find any guidance on this in the ...

cssreactjscheckboxfluentui-react

Utilize the power of Vuejs' v-for directive to populate not only the table rows, but also its header with

Can a single object be used to populate both table headers and rows? I attempted to do so with the code below: <table v-for="(table, index) in tables" :key="index"> <thead> <tr> <th> {{ table. ...

htmlvue.jsloopshtml-tablev-for