How to stretch bootstrap5 text area in tabs-CodePudding

I would like to place a text area within the tab and stretch it horizontally and vertically within the card body.

However, using d-flex and align-self-stretch does not seem to work on the tab content div.

Here is what I have tried. I used bootstrap5 to place tabs with text areas inside cards.

I added a d-flex flex-column class to the card-body.
I added d-flex align-self-stretch to the tab content <div >
I have set display: flex from css, since there seems to be no flex in the div attribute.

However, the tab content does not fill the extra space in the card.
Is there any solution to this problem?
Thank you.

Here is a simple code that reproduces the problem.
https://codepen.io/sankai0044/pen/abEXaoJ

Here is the code.

.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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      Header
    </div>
    <div >
      <ul  id="myTab" role="tablist">
        <li  role="presentation">
          <button
            
            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  role="presentation">
          <button
            
            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  role="presentation">
          <button
            
            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  id="myTabContent">
        <div
          
          id="home"
          role="tabpanel"
          aria-labelledby="home-tab"
        >
          <div >
            <textarea  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
          
          id="profile"
          role="tabpanel"
          aria-labelledby="profile-tab"
        >
          Profile Content
        </div>
        <div
          
          id="contact"
          role="tabpanel"
          aria-labelledby="contact-tab"
        >
          Contact Content
        </div>
      </div>
    </div>
    <div >
      Footer
    </div>
  </div>
</body>

CodePudding user response：

You don't need the .align-self-stretch class. You are running into problems with the original Bootstrap CSS for .card. To fix that you have to add the BS class .flex-grow-1 to your tab-content div.

Moreover, you have to make sure that your #myTextarea is set to height: 100%.

I hope this creates the effect you were looking for.

.card{
  width: 400px;
  height: 300px;
}

.tab-content{
  display: flex;
}

.tab-pane{
  width: 100%;
  height: 100%;
}

.form-group{
  width: 100%;
  height: 100%;
}

#MyTextarea{
  resize: none;
  height: 100%;
}

<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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      Header
    </div>
    <div >
      <ul  id="myTab" role="tablist">
        <li  role="presentation">
          <button
            
            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  role="presentation">
          <button
            
            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  role="presentation">
          <button
            
            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  id="myTabContent">
        <div
          
          id="home"
          role="tabpanel"
          aria-labelledby="home-tab"
        >
          <div >
            <textarea  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
          
          id="profile"
          role="tabpanel"
          aria-labelledby="profile-tab"
        >
          Profile Content
        </div>
        <div
          
          id="contact"
          role="tabpanel"
          aria-labelledby="contact-tab"
        >
          Contact Content
        </div>
      </div>
    </div>
    <div >
      Footer
    </div>
  </div>
</body>

CodePudding user response：

Add flex-basis: 100%; to your #myTabContent. Next, just simply add h-100 or (height: 100%;) as a class on your textarea element.

.card{
  width: 400px;
  height: 300px;
}

.tab-content{
  display: flex;
}

.tab-pane{
  width: 100%;
  height: 100%;
}

.form-group{
  width: 100%;
  height: 100%;
}

#myTabContent {
  flex-basis: 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      Header
    </div>
    <div >
      <ul  id="myTab" role="tablist">
        <li  role="presentation">
          <button
            
            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  role="presentation">
          <button
            
            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  role="presentation">
          <button
            
            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  id="myTabContent">
        <div
          
          id="home"
          role="tabpanel"
          aria-labelledby="home-tab"
        >
          <div >
            <textarea  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
          
          id="profile"
          role="tabpanel"
          aria-labelledby="profile-tab"
        >
          Profile Content
        </div>
        <div
          
          id="contact"
          role="tabpanel"
          aria-labelledby="contact-tab"
        >
          Contact Content
        </div>
      </div>
    </div>
    <div >
      Footer
    </div>
  </div>
</body>