CODEWITHSUNDEEP
javascripthtmlcss
Drake Xiang
Drake Xiang

Reputation: 368

Weird text position in my simple code

Problematic code here: 

#container {  /*CSS part*/
  width: 606px;
  height: 400px;
  border: 1px #434343 solid;
  border-radius: 7px;
  border-top: none;
}

#tabs {
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid;
  cursor: pointer;
  border-radius: 7px 7px 0 0;
}

#content {
  height: 300px;
  text-align: center;
}

.subtab {
  display: none;
  text-align: center;
  height: 100%;
}

#tab1 {
  background-color: blue;
}

#tab2 {
  background-color: red;
}

#tab3 {
  background-color: green;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

<div id="container"> <!-- html part -->
<ul id="tabs">
  <li id="blue">blue</li>
  <li id="red">red</li>
  <li id="green">green</li>
</ul>
<div id="content">
  <div id="tab1" class="subtab">This is tab1!</div>
  <div id="tab2" class="subtab">This is tab2!</div>
  <div id="tab3" class="subtab">This is tab3!</div>
</div>


var tablist = document.getElementById('tabs').children; //js part
var sublist = document.getElementsByClassName('subtab');

for (var i = 0; i < tablist.length; i++) {
  tablist[i].index = i; //保存每次迭代的i值

  tablist[i].addEventListener('click', function () {
    for (var x = 0; x < sublist.length; x++) {
      sublist[x].style.display = 'none';
    }

    sublist[this.index].style.display = 'block';
    this.style.borderBottom = 'none';
  })
}

Sorry seems the html part doesn't come out right, markdown is always a pain for me.

full code here demo

The weird thing is the text position of tab content(subtab class), if you click in an order of blue->red->green, the text shows fine in the center, however, if you click green first the text will show up right-aligned, then you click blue then you will find that the text position will be the right place.

There are several situations around this, but basically this is the matter.

Why??

Upvotes: 1

Views: 81

Answers (5)

patelarpan
patelarpan

Reputation: 7991

It's problem of box-sizing you can fix this by add below class to your CSS

div#container, div#container * {
    box-sizing: border-box;
}

you can more about box-sizing https://css-tricks.com/box-sizing/

Upvotes: 1

FlipFloop
FlipFloop

Reputation: 1264

I just added text-align rule to the .subtabclass, like so:

.subtab {
  display: none;
  text-align: center;
  height: 100%;
}

then, in the JS, comment out the 

this.style.borderBottom = 'none';

worked perfectly

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

Here is a Working Jsfiddle

Just added position:absolute; and width:100%; to your .subtab css rule

Below is the code Snippet.

Final .subtab is

.subtab {
  display: none;
  height: 100%;
  text-align: center;
  position:absolute;
  width:100%;
}


var tablist = document.getElementById('tabs').children;
    var sublist = document.getElementsByClassName('subtab');
    
    for (var i = 0; i < tablist.length; i++) {
      tablist[i].index = i; //store the i value for every iteration
      
      tablist[i].addEventListener('click', function () {
        for (var x = 0; x < sublist.length; x++) {
          sublist[x].style.display = 'none';
        }
        
        sublist[this.index].style.display = 'block';
        this.style.borderBottom = 'none';
      })
    }
#container {
      width: 606px;
      height: 400px;
      border: 1px #434343 solid;
      border-radius: 7px;
      border-top: none;
    }
    
    #tabs {
      width: 100%;
      height: 100px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #tabs li {
      float: left;
      width: 200px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid;
      cursor: pointer;
      border-radius: 7px 7px 0 0;
    }
    
    #content {
      height: 300px;
      text-align: center;
    }
    
    .subtab {
      display: none;
      height: 100%;
      text-align: center;
      position:absolute;
      width:100%;
    }
    
    #tab1 {
      background-color: blue;
    }
    
    #tab2 {
      background-color: red;
    }
    
    #tab3 {
      background-color: green;
    }
    
    #blue {
      background-color: blue;
    }
    
    #red {
      background-color: red;
    }
    
    #green {
      background-color: green;
    }
<body>
 <h1>simple tab</h1>
  <div id="container">
    <ul id="tabs">
      <li id="blue">blue</li>
      <li id="red">red</li>
      <li id="green">green</li>
    </ul>
    <div id="content">
      <div id="tab1" class="subtab">This is tab1!</div>
      <div id="tab2" class="subtab">This is tab2!</div>
      <div id="tab3" class="subtab">This is tab3!</div>
    </div>
  </div>
  
  
</body>

Upvotes: 0

Aziz
Aziz

Reputation: 20705

The problem is caused by the height of the <ul> element (the tabs container). You have specified:

#tabs {
    height: 100px;
}

and 

#tabs li {
    height: 100px;
}

But you did not take into account the 2 additional pixels for the borders.

Fix

To fix this, change the height of the <ul> element to 102px:

#tabs {
    height: 102px;
    ...
}

Upvotes: 1

jtan
jtan

Reputation: 13

I made some changes to your #content id by specifying the position and width and it should be working well now:

#content {
  height: 300px;
  text-align: center;
  position: absolute;
  width: inherit;
}

Upvotes: 1

Related Questions