I am struggling to properly position a text area within a tab and have it stretch both horizontally and vertically within the card body.
Despite trying to use d-flex and align-self-stretch, the tab content div does not seem to respond as expected.
My attempts involved using Bootstrap 5 to create tabs with text areas inside cards.
- I applied a
d-flex flex-columnclass to thecard-body. - I also added
d-flex align-self-stretchto the tab content<div class="tab-content"> - To address the lack of
flexattribute in thediv, I setdisplay: flexin the CSS.
However, the tab content is not expanding to fill the extra space within the card.
Any suggestions on how to solve this issue would be greatly appreciated.
Thank you.
For reference, here is a simple code snippet showcasing the problem:
https://codepen.io/sankai0044/pen/abEXaoJ
Below is the code snippet:
.card{
width: 400px;
height: 300px;
}
.tab-content{
display: flex;
}
.tab-pane{
width: 100%;
height: 100%;
}
.form-group{
width: 100%;
height: 100%;
}
#MyTextarea{
resize: none;
}<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd88938d938f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908e908c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#home"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content d-flex align-self-stretch" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="form-group">
<textarea class="form-control" id="MyTextarea" disabled>This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.</textarea>
</div>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
Profile Content
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
Contact Content
</div>
</div>
</div>
<div class="card-footer">
Footer
</div>
</div>
</body>