After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. Following the upgrade, I noticed that the 'row' class on several <div> elements is being ignored, resulting in all other controls appearing on separate lines with a maximum width matching the container width.
https://i.sstatic.net/XZ13t.png
For example, as shown in the image, my Totals component displays Subtotal with the value below it on a new line. Here is the code for my Totals component:
import React from 'react';
import { GetTotal } from './CartHandler';
import { formatter } from '../common.js'
import "./Checkout.scss"
export default function TotalsBlock(props) {
let carttotal = GetTotal();
let shipping = 10.57;
let taxes = 4.93;
return (
<aside id="checkout" className="block col-1">
<h1>Total</h1>
<div className="row">
<label>Subtotal</label>
<label>{formatter.format(carttotal)}</label>
</div>
<div className="row">
<label>Shipping</label>
<label>{formatter.format(shipping)}</label>
</div>
<div className="row">
<label>Taxes</label>
<label>{formatter.format(taxes)}</label>
</div>
<hr/>
<div className="row">
<label>Total</label>
<label>{formatter.format(carttotal + shipping + taxes)}</label>
</div>
</aside>
);
}
... and here is the content of Checkout.scss:
#checkout {
.row {
display: flex;
align-items: stretch;
justify-content: space-between;
margin-right: 0;
margin-left: 0;
font-size: 12px;
}
h1 {
font-size: 1rem;
font-weight: bold;
}
.col-1 {
flex: 1;
max-width: 33%;
}
.col-2 {
flex: 2;
max-width: 66%;
}
.header {
background-color: cornflowerblue;
color: white;
}
.block {
background-color: lightgray;
padding: 1rem;
margin: 0.5rem;
border-radius: 0.5rem;
}
.table-wrapper {
max-height: 200px;
overflow: auto;
}
th.price, th.quantity {
width: 10%;
}
.table-extra {
}
}
I'm curious about the changes in bootstrap 5 that may have caused the 'row' class not to work properly, ultimately resulting in my elements reaching their maximum size. I suspect these issues are intertwined. Any assistance would be greatly appreciated.
UPDATE
https://i.sstatic.net/wYh1g.png
Upon inspecting with the Browser's DevTools, I observed that the width of the .row class is set to 100%. Manually unchecking or setting the width to auto corrects the layout. However, adding width: auto to .row in the Checkout.scss file still results in the width being set to 100%...