I have 5 cards which have display as flex in a row with class mrow.I have the row in a container with class mcontent.The height of the row is 571px.
.mrow{height:100%}
.mcontain{height:571px}
But when I have a button in 3rd flex, it gets extra space below it and expands the entire row. I tried adding align-self: flex-start; as stated here but in vain.
My actual result is
second row height is lower than first
This is where I added my align-self code but it doesn’t remove the bottom space
Thanks in advance
Edited to add:
when I run $(".mrow").css("height", ' calc(100% - ' + (- (-$(".div_text_center").height())) + 'px)'); the height increases for every card creating an extra space below ( below only 1 card. I want all cards same height). How do I overcome it?
Edited to add:
In maximised mode, the first row with 3 cards has height greater than second row with remaining 2 cards after the button is added.
That is my problem. I need both the 2 rows same height even when button is added in 3rd card of my first row
function relocate() {
$(".mcontain").css("height", ' calc(100% - ' + ($(".navbar").height() - (-$("footer").height()) - (-$(".div_text_center").height())) + 'px)');
$(".mrow").css("min-height", ' calc(100% - ' + (- (-$(".div_text_center").height())) + 'px)');
//$(".mcardlogin").css("min-height","200px");
}
relocate();.mcontain{
height:571px;
}.card {
position: relative;
display: flex
;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
main, html, body {
height: 100%;
/* margin: 0; */
}
.mrow {
display: flex;
height: calc(100% + 0px);
}
.row{
flex-wrap: wrap;
}
.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header {
padding: 0.5rem 1rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card1 {
background-color: violet !important;
}
.card2 {
background-color: indigo !important;
}
.card3 {
background-color: blue !important;
}
.card4 {
background-color: green !important;
}
.card5 {
background-color: yellow !important;
}
.mcardlogin {
border-radius: .25rem;
}
.a_login {
float: right;
}
.colorwhite {
color: white;
}
.a_button {
-webkit-box-shadow: inset 0 0 30px #00f, 0 0 30px #00f;
-moz-box-shadow: inset 0 0 30px #00f, 0 0 30px #00f;
box-shadow: inset 0 0 30px #00f, 0 0 30px #00f;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
background: #168bff;
display: block;
padding-top: 20px;
padding-bottom: 20px;
margin: 20px;
text-decoration: none;
font: bold 17px Helvetica, Arial, sans-serif;
color: #fff;
text-align: center
}
.a_button:hover {
-webkit-box-shadow: inset 0 0 30px #f00, 0 0 30px #f00;
-moz-box-shadow: inset 0 0 30px #f00, 0 0 30px #f00;
box-shadow: inset 0 0 30px #f00, 0 0 30px #f00;
background: #f56565;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<div class="container mcontain" style="">
<main role="main" class="pb-3 m_main">
<div class="mrow row">
<div class="col-md-6 col-sm-12 mcardlogin card1">
<div class="card ">
<div class="card-header">
<div class="right">
<div class="min250px">
<div id="divtick_login" class="logininfo" style="display: none;">
<i class="bi bi-check-circle green loginwrong"></i>
Welcome,
<i id="sessionuser"></i>
<a class="a_logout">Logout</a>
</div>
<div id="divwrong_login" class="logininfo">
<i class="bi bi-exclamation-circle red logintick"></i>
Logged out
<a class="a_login">Log In</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 mcardlogin card2">
<div class="card ">
</div>
</div>
<div class="col-md-6 col-sm-12 mcardlogin card3">
<div class="card ">
<div class="card-header">
<div class="right">
<div class="min250px colorwhite">
Details
</div>
</div>
</div>
<div class="card-body">
<div class="card-text"><a class="a_button" >go</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 mcardlogin card4">
<div class="card ">
</div>
</div>
<div class="col-md-6 col-sm-12 mcardlogin card5">
<div class="card ">
</div>
</div>
</div>
</div>
</div>JSFiddle
16