CODEWITHSUNDEEP
javascripthtmlcss
A. Vreeswijk
A. Vreeswijk

Reputation: 954

HTML Div takes up space while hidden

I have a problem. I made the following tabbedPage, but the hidden content still takes up space. Here is the code:

let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for (let i = 0; i < tabsPane.length; i++) {
  tabsPane[i].addEventListener("click", function() {
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");

    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}
/*--------------General----------------*/

body {
  font-family: Arial;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}


/*-------------------------------------*/


/*-------------TabbedPage---------------*/

.tabbedpage {
  padding: 20px 0px;
}

.tabbedpage .tabbedpage-header {
  height: 60px;
  display: flex;
  align-items: center;
}

.tabbedpage .tabbedpage-header>div {
  width: calc(100% / 2);
  text-align: center;
  color: #888;
  font-weight: 600;
  cursor: pointer;
  font-size: 20px;
  text-transform: uppercase;
  outline: none;
}

.tabbedpage .tabbedpage-header>div>i {
  display: block;
  margin-bottom: 5px;
}

.tabbedpage .tabbedpage-header>div.active {
  color: #d81e05;
  display: block;
}

.tabbedpage .tabbedpage-indicator {
  position: relative;
  width: calc(100% / 2);
  height: 5px;
  background: #d81e05;
  left: 0px;
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.tabbedpage .tabbedpage-content {
  position: relative;
  height: calc(100% - 60px);
  padding: 10px 5px;
}

.tabbedpage .tabbedpage-content>div {
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}

.tabbedpage .tabbedpage-content>div.active {
  opacity: 1;
}


/*--------------------------------------*/


/*---------------Footer-----------------*/

footer {
  width: 100%;
}

footer .red-bar {
  display: flex;
  align-items: center;
  background: #d81e05;
  height: 120px;
}

footer .red-bar .content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/*------------------------------------------*/
<div class="container">
  <div class="tabbedpage">
    <div class="tabbedpage-header">
      <div class="active">
        statistics
      </div>
      <div>
        user management
      </div>
    </div>
    <div class="tabbedpage-indicator"></div>
    <div class="tabbedpage-content">
      <div class="active">
        <h2>This is statistics section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
      </div>
      <div>
        <h2>This is the user management section</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="red-bar">
    <div class="container content">
      <p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
    </div>
  </div>
</footer>

Now the TabbedPage is working the way I want, except that the content of a tab always uses space while not being showed. I can fix it by setting position: absolute;, but then the content goes trough the footer, which is also not allowed. So how can I remove the space that a hidden tab uses, while not going trough the footer?

Upvotes: 1

Views: 215

Answers (5)

user13774796
user13774796

Reputation:

I think you should be using display instead of opacity, just as @MaxiGui wrote. You can be a bit fancy too, and create a tag for it:

invisible {
display:none;
}

Upvotes: 0

The Crazy Creeper
The Crazy Creeper

Reputation: 43

You can use document.write() to edit the document so you can remove add the div when required. Example:

function runcode(){
  document.write("<div> hi </div>")
}
#button{
background-color: red;
padding: 15px 32px;
}
#button:hover{
background-color: pink;
}
<button onclick="runcode()" id="button">replace with a div with hi inside</button>

Upvotes: 0

MaxiGui
MaxiGui

Reputation: 6348

You should use display instead of opacity.

But you should also set div to display: block; in div.active as below:

.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
  display: block; /* show it */
}

Pay attention that if you want to set div into div.active with a different displaythan you need to add !important to make sure that it will be taken correctly.

You also need to change some js in your for loop as below:

/** IF to point to the right div **/
    if(tabsPane[i].className.match(/\bstat\b/)){
      document.getElementById("stat").classList.add('active');
      document.getElementById("userManagement").classList.remove('active');
    }else if(tabsPane[i].className.match(/\buserManagement\b/)){
       document.getElementById("userManagement").classList.add('active');
      document.getElementById("stat").classList.remove('active');
    }

And to make it works I was adding classes and id such as stat and userManagement because it was not identifying correctly the div anymore.

DEMO (Simple example):

let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for (let i = 0; i < tabsPane.length; i++) {
  tabsPane[i].addEventListener("click", function() {
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    /*tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");*/
    
    /** IF to point to the right div **/
    if(tabsPane[i].className.match(/\bstat\b/)){
      document.getElementById("stat").classList.add('active');
      document.getElementById("userManagement").classList.remove('active');
    }else if(tabsPane[i].className.match(/\buserManagement\b/)){
       document.getElementById("userManagement").classList.add('active');
      document.getElementById("stat").classList.remove('active');
    }


    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}
/*--------------General----------------*/

body {
  font-family: Arial;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}


/*-------------------------------------*/


/*-------------TabbedPage---------------*/

.tabbedpage {
  padding: 20px 0px;
}

.tabbedpage .tabbedpage-header {
  height: 60px;
  display: flex;
  align-items: center;
}

.tabbedpage .tabbedpage-header>div {
  width: calc(100% / 2);
  text-align: center;
  color: #888;
  font-weight: 600;
  cursor: pointer;
  font-size: 20px;
  text-transform: uppercase;
  outline: none;
}

.tabbedpage .tabbedpage-header>div>i {
  display: block;
  margin-bottom: 5px;
}

.tabbedpage .tabbedpage-header>div.active {
  color: #d81e05;
  display: block;
}

.tabbedpage .tabbedpage-indicator {
  position: relative;
  width: calc(100% / 2);
  height: 5px;
  background: #d81e05;
  left: 0px;
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.tabbedpage .tabbedpage-content {
  position: relative;
  height: calc(100% - 60px);
  padding: 10px 5px;
}

.tabbedpage .tabbedpage-content>div {
  width: 100%;
  top: 0;
  left: 0;
  display: none; /* hide it */
  transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}

.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
  display: block; /* show it */
}


/*--------------------------------------*/


/*---------------Footer-----------------*/

footer {
  width: 100%;
}

footer .red-bar {
  display: flex;
  align-items: center;
  background: #d81e05;
  height: 120px;
}

footer .red-bar .content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/*------------------------------------------*/
<div class="container">
  <div class="tabbedpage">
    <div class="tabbedpage-header">
      <div class="stat active">
        statistics
      </div>
      <div class="userManagement">
        user management
      </div>
    </div>
    <div class="tabbedpage-indicator"></div>
    <div class="tabbedpage-content">
      <div id="stat" class="active">
        <h2>This is statistics section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
        <div>DIV IN DIV 2</div>
      </div>
      <div id="userManagement">
        <h2>This is the user management section</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="red-bar">
    <div class="container content">
      <p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
    </div>
  </div>
</footer>

DEMO (Large example):

let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for (let i = 0; i < tabsPane.length; i++) {
  tabsPane[i].addEventListener("click", function() {
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    /*tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");*/
    
    /** IF to point to the right div **/
    if(tabsPane[i].className.match(/\bstat\b/)){
      document.getElementById("stat").classList.add('active');
      document.getElementById("userManagement").classList.remove('active');
    }else if(tabsPane[i].className.match(/\buserManagement\b/)){
       document.getElementById("userManagement").classList.add('active');
      document.getElementById("stat").classList.remove('active');
    }


    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}
/*--------------General----------------*/

body {
  font-family: Arial;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}


/*-------------------------------------*/


/*-------------TabbedPage---------------*/

.tabbedpage {
  padding: 20px 0px;
}

.tabbedpage .tabbedpage-header {
  height: 60px;
  display: flex;
  align-items: center;
}

.tabbedpage .tabbedpage-header>div {
  width: calc(100% / 2);
  text-align: center;
  color: #888;
  font-weight: 600;
  cursor: pointer;
  font-size: 20px;
  text-transform: uppercase;
  outline: none;
}

.tabbedpage .tabbedpage-header>div>i {
  display: block;
  margin-bottom: 5px;
}

.tabbedpage .tabbedpage-header>div.active {
  color: #d81e05;
  display: block;
}

.tabbedpage .tabbedpage-indicator {
  position: relative;
  width: calc(100% / 2);
  height: 5px;
  background: #d81e05;
  left: 0px;
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.tabbedpage .tabbedpage-content {
  position: relative;
  height: calc(100% - 60px);
  padding: 10px 5px;
}

.tabbedpage .tabbedpage-content>div {
  width: 100%;
  top: 0;
  left: 0;
  display: none; /* hide it */
  transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}

.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
  display: block; /* show it */
}


/*--------------------------------------*/

/*-------------Statistics---------------*/

.activity-24h-title {
    color: #000000;
    font-size: 30px;
    font-weight: bold;
}

.activity-24h {
    width: 100%;
    height: 125px;
    background-color: #F6F6F6;
    display: flex !important;     /** Add !important **/
    align-items: center;
    justify-content: center;
}

.activity-24h .stat-frame {
    position: relative;
    width:calc(100% / 5 - (4 * 2px));
    display: flex !important;    /** Add !important **/
    flex-direction: column
}

.activity-24h .stat-frame-title {
    color: #000000;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 15px;
}

.activity-24h .stat-frame-value {
    color: #d81e05;
    font-size: 42px;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.activity-24h .seperation-border {
    width: 2px;
    height: 80%;
    background-color: #C4C4C4;
}

/*--------------------------------------*/
/*---------------Footer-----------------*/

footer {
  width: 100%;
}

footer .red-bar {
  display: flex;
  align-items: center;
  background: #d81e05;
  height: 120px;
}

footer .red-bar .content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
<div class="tabbedpage">
    <div class="tabbedpage-header">
        <div class="stat active">
            Statistieken
        </div>
        <div class="userManagement">
            Gebruikersbeheer
        </div>
    </div>
    <div class="tabbedpage-indicator"></div>
    <div class="tabbedpage-content">
        <div id="stat" class="active">          
            <span class="activity-24h-title">Afgelopen 24 uur</span>
            <div class="activity-24h">
                <div class="stat-frame">
                    <span class="stat-frame-title">Nieuwe gebruikers</span>
                    <span class="stat-frame-value">513</span>
                </div>
                <div class="seperation-border"></div>
                <div class="stat-frame">
                    <span class="stat-frame-title">Actieve gebruikers</span>
                    <span class="stat-frame-value">1054</span>
                </div>
                <div class="seperation-border"></div>
                <div class="stat-frame">
                    <span class="stat-frame-title">Matches</span>
                    <span class="stat-frame-value">1577</span>
                </div>
                <div class="seperation-border"></div>
                <div class="stat-frame">
                    <span class="stat-frame-title">Gerapporteerd</span>
                    <span class="stat-frame-value">33</span>
                </div>
                <div class="seperation-border"></div>
                <div class="stat-frame">
                    <span class="stat-frame-title">Geblokkeerd</span>
                    <span class="stat-frame-value">9</span>
                </div>
            </div>
        </div>
        <div id="userManagement">
            <h2>This is about section</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
        </div>
    </div>
</div>

<footer>
  <div class="red-bar">
    <div class="container content">
      <p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
    </div>
  </div>
</footer>

Upvotes: 1

johannchopin
johannchopin

Reputation: 14844

You can achieve that by using display: none and display: block instead of opacity: 0 and opacity: 1 to hide the inactive element:

let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for (let i = 0; i < tabsPane.length; i++) {
  tabsPane[i].addEventListener("click", function() {
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");

    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}
/*--------------General----------------*/

body {
  font-family: Arial;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}


/*-------------------------------------*/


/*-------------TabbedPage---------------*/

.tabbedpage {
  padding: 20px 0px;
}

.tabbedpage .tabbedpage-header {
  height: 60px;
  display: flex;
  align-items: center;
}

.tabbedpage .tabbedpage-header>div {
  width: calc(100% / 2);
  text-align: center;
  color: #888;
  font-weight: 600;
  cursor: pointer;
  font-size: 20px;
  text-transform: uppercase;
  outline: none;
}

.tabbedpage .tabbedpage-header>div>i {
  display: block;
  margin-bottom: 5px;
}

.tabbedpage .tabbedpage-header>div.active {
  color: #d81e05;
  display: block;
}

.tabbedpage .tabbedpage-indicator {
  position: relative;
  width: calc(100% / 2);
  height: 5px;
  background: #d81e05;
  left: 0px;
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.tabbedpage .tabbedpage-content {
  position: relative;
  height: calc(100% - 60px);
  padding: 10px 5px;
}

.tabbedpage .tabbedpage-content>div {
  width: 100%;
  top: 0;
  left: 0;
  display: none; /* hide it */
  transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}

.tabbedpage .tabbedpage-content>div.active {
  display: block; /* show it */
}


/*--------------------------------------*/


/*---------------Footer-----------------*/

footer {
  width: 100%;
}

footer .red-bar {
  display: flex;
  align-items: center;
  background: #d81e05;
  height: 120px;
}

footer .red-bar .content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/*------------------------------------------*/
<div class="container">
  <div class="tabbedpage">
    <div class="tabbedpage-header">
      <div class="active">
        statistics
      </div>
      <div>
        user management
      </div>
    </div>
    <div class="tabbedpage-indicator"></div>
    <div class="tabbedpage-content">
      <div class="active">
        <h2>This is statistics section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
      </div>
      <div>
        <h2>This is the user management section</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="red-bar">
    <div class="container content">
      <p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
    </div>
  </div>
</footer>

Upvotes: 1

michael
michael

Reputation: 4173

As a quick workaround you can modify footer style as following.

footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}

Upvotes: -1

Related Questions