Achieving Full Height and Width of Tab Panel with Bootstrap 4.3

I recently upgraded to bootstrap 4.3 and discovered the handy sizing classes m-* and w-* for setting element height and width. After successfully achieving 100% height and width for the container, I'm now looking to apply these dimensions to the tab-panel as well.

Check out this JSFiddle


    <div class="container-fluid w-highlight-container h-100 d-flex flex-column">        
        <main role="main" class="pb-3">      

     <ul class="nav nav-tabs mt-3">
        <li class="nav-item">
          <a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
        </li>
       <li class="nav-item">
         <a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
       </li>      
    </ul>
    <div class="tab-content">
    <div id="w-tab1" class="tab-pane fade active show" role="tabpanel">        
        <div class="row">
            <div class="col-md-12">
                <div class="w-tab1 h-100 w-100">
                  This element needs 100% height and width of the viewport
                </div>
           </div>
        </div>
    </div>
    <div id="w-tab2" class="tab-pane fade" role="tabpanel">
        <div class="row">
            <div class="col-md-12">
                <div class="w-tab2 h-100 w-100">
                  This element also requires 100% height and width of the viewport
                </div>
            </div>
        </div>
    </div>    
    </div>
</main>
    </div>
   <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
cssbootstrap-4

Answer №1

w-100 and h-100 are functioning correctly, but the issue lies with the parent container not stretching 100% from side to side. To fix this, we need to ensure that starting from tab-content, all elements respect a width and height of 100%, down to the relevant div already containing w-100 and h-100 classes.

Below is the working code snippet:

.w-tab1 {
  border: solid 2px black;
  background-color: green;
}

.w-tab2 {
  border: solid 2px black;
  background-color: red;
}

.w-highlight-container {
  border: solid 2px black;
  background-color: #ffd;
}

html,
body {
  height: 100%;
}

.tab-content {
  height: calc(100vh - (75px)) !important;
  width: calc(100vw - (40px)) !important
}

.tab-content>.active {
  display: inline-flex;
  height: 100%;
  width: 100%
}

.tab-content>.active>.row {
  display: contents
}

.tab-content>.active>.row>div {
  padding-left: 0;
  width: 100%;
  display: contents;
}

.tab-content>.active>.row>div>.w-100 {
  width: 99% !important
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container-fluid w-highlight-container h-100 d-flex flex-column">
  <main role="main" class="pb-3">

    <ul class="nav nav-tabs mt-3">
      <li class="nav-item">
        <a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="w-tab1" class="tab-pane fade active show" role="tabpanel">
        <div class="row">
          <div class="col-md-12">
            <div class="w-tab1 h-100 w-100">
              requires 100% height and 100% width
            </div>
          </div>
        </div>
      </div>
      <div id="w-tab2" class="tab-pane fade" role="tabpanel">
        <div class="row">
          <div class="col-md-12">
            <div class="w-tab2 h-100 w-100">
              requires 100% height and 100% width
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<footer class="border-top footer text-muted">
  <div class="container">
    &copy; 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
  </div>
</footer>

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

Image staying in place when browser page is resized

Half page browser Full page browser Hello everyone, I could really use some assistance with my program. I'm trying to figure out how to keep my robot in the same position when switching from a half-page browser to a full-screen browser. Currently, w ...

htmlcssweb

What is the method for changing the color of text within a button when hovering using CSS?

In my OceanWP WordPress theme, I customized the top-bar menu by adding a button labeled "Post a Job" using CSS. Screenshot Link I have two top-bar menus - one for logged-in users and another for logged-out users. The "post a job" button has a 2px purple ...

csswordpress

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

javascriptjqueryhtmlcss

Guide to navigating to a different webpage with Node.js

I am a beginner user of NodeJS and I have a specific request. I need assistance with setting up a page redirect from one page to another upon clicking on a link. Any guidance provided will be greatly appreciated. Here is the code snippet: app.js var expr ...

htmlcssnode.jsnpmvisual-studio-code

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

https://i.sstatic.net/oqRwR.jpg In the image above, I need to adjust the position of the textbox to align it with the TextArea. Is there a Bootstrap class that can help me achieve this? My current version of Bootstrap is 3.3.6. HTML &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

JavaScript allows for the manipulation of elements within a webpage, which includes accessing elements from one

There is a file that contains a fragment for the navbar. The idea is to have listItems in the navbar, and upon clicking on those listItems, another subnavigationbar should open below it. Below is the code I currently have: <!DOCTYPE html> <html x ...

javascripthtmlcssbootstrap-5

Utilizing FontAwesome icons instead of png images as a visual source

Is there anyone who can assist me? I currently have SiteSearch360 set up on my website with a full screen search bar that is activated by clicking on an image of a magnifying glass. My goal is to replace the default image (src="https://cdn.sitesearch360. ...

htmlcsssvgfont-awesomeghost-blog

Center an image both vertically and horizontally within an Owl Carousel arrow slider

I have set up an owl carousel on my page with a customized arrow positioned next to the slider. Currently, it looks like this: https://i.stack.imgur.com/gCfM0.png My goal is to vertically align the arrows and make sure the left arrow is aligned to the le ...

htmlcsstwitter-bootstrap

Covering the full width of the page, the background image

My struggle is with setting a background image to 100% width, as the image ends up getting cut off on half of the screen. The picture becomes wider than my display area. How can I resolve this issue so that the image width adjusts to fit the screen without ...

htmlcssimagetumblr

Prevent the page from scrolling while the lightbox is open

I am struggling with a lightbox that contains a form. Everything is functioning properly, but I need to find a way to prevent the HTML page from scrolling when the lightbox is active. <a href = "javascript:void(0)" onclick=" document.getElementById(& ...

javascripthtmlcss

What is the best way to embed sections of one HTML page into another page?

Is there a method I can use to embed sections of one webpage within another webpage? The dilemma arises from the fact that the second page has a distinct style compared to my main page. Is it feasible to apply the alternate style solely to specific content ...

javascriptphphtmlcss

Deactivate a chosen item following selection

Is there a way to deactivate a selectable element after it has been clicked in the scenario below? Additionally, I would like to modify its CSS style. $(function(){ $("#selectable").selectable({ stop: function() { var result = $( "#select-re ...

javascriptjquerycssjquery-uijquery-ui-selectable

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

Is there a way to input password values continuously using a JavaScript onclick function into a password field? I have two images, one 'Blue' and one 'Red', that trigger an onclick function with the following values: Blue= w3! Red= T4 ...

phpjavascripthtmlcss

Turn off Chrome Autofill feature when placeholders are being used in forms

I am encountering difficulties with Google autofill for fields that have placeholders. Despite attempting various solutions provided at: Disabling Chrome Autofill, none of them seem to work as needed. The challenge is to create a form with different field ...

javascripthtmlcssgoogle-chromeautofill

Positioning an image beneath the navigation bar in Bootstrap and CSS without it getting covered by text

I am having difficulty positioning an image below the navbar without it overlapping with the text in the navbar. No matter what I try in my code, the image remains attached to the bottom of the navbar and won't move to a separate row below it. I hav ...

htmlcssimagebootstrap-4

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...

javascriptcssangularjsfroala

Tips on swapping out an image multiple times as you hover over various text options

As a Designer creating a portfolio website, I have a good understanding of HTML and CSS. Here is my homepage: https://i.sstatic.net/WWMPA.png I am looking to create a feature where different images are displayed in a red circle preview when hovering over ...

javascripthtmlcss

Issue with fixed header in Vuetify v-data-table not functional

While working with the Vuetify v-data-table component, I have enabled the fixed-header property. However, I have noticed that the table header is scrolling along with the table body. I am using the latest version of Chrome. Does anyone know how to addres ...

htmlcssvue.jsvuejs2vuetify.js

Having issues with the toggle display button functionality not working properly in Angular when using click()

One of the files in my project is named server.component.ts and another is named server.component.html. This is how my server.component.ts file is structured: import { Component } from '@angular/core'; @Component({ selector: 'app-server& ...

htmlcssangulartypescript

Hover activates a CSS animation where elements pop over other elements

I want to design a menu that resembles those "apps panels" we often see. My menu consists of 6 elements, arranged side-by-side with no space between them. When I hover over an element, it slightly pops as shown in the code snippet below: #account-bub ...

htmlcss