CODEWITHSUNDEEP
javascripthtmlcss
Senju
Senju

Reputation: 1035

Changing li height moves parent height

Here is an example in jsfiddle

The problem is that when changing the height of the active tab, it grows downward, leaving a space between the bottom-border and the non-selected tabs. Is there a way to make it grow upward? Or some other way to solve this problem?

$('li').on('click', function() {
  $('li').removeClass('active');
  $(this).addClass('active');
});
ul {
  display: block;
  border-bottom: 1px solid #444;
  padding: 0;
}

li {
  display: inline-block;
  padding: 0 20px;
  background: #888;
}

.active {
  background: #bbb;
  height: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

Upvotes: 0

Views: 83

Answers (6)

Belir
Belir

Reputation: 1

It's regular behaivor. Check my solution

http://jsfiddle.net/chv6403m/9/

<ul>
    <li><span>Tab 1</span></li>
    <li><span>Tab 2</span></li>
    <li><span>Tab 3</span></li>
</ul>


ul
{
    display: block;
    border-bottom: 1px solid #444;
    padding: 0;
    height: 30px;
}

li
{
    position: relative;
    vertical-align: top;
    display: inline-block;
    height: 30px;
}

li span
{
    vertical-align: top;
    display: block;
    padding: 0 20px;
    background: #888;
    height: 30px;
}
.active span
{   
    position: absolute;
    top: 0;
    background: #bbb;
    height: 36px;
}

Upvotes: -2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Updated fiddle

Just adding padding to the active class do the work :

.active
{
    background: #bbb;
    height: 40px;
    padding-top:20px;
}

Hope this helps

Upvotes: 0

Starfish
Starfish

Reputation: 3574

I added a default margin of 6px to the top of the li-elements. When the selected element is active, it removes the margin so it has the space to increase the height while staying in the same place.

Try it out: 

$('li').on('click', function() {
  $('li').removeClass('active');
  $(this).addClass('active');
});
ul {
  display: block;
  border-bottom: 1px solid #444;
  padding: 0;
}
li {
  display: inline-block;
  padding: 0 20px;
  background: #888;
  height: 30px;
  vertical-align: bottom;
  margin-top: 6px;
}
.active {
  margin-top: 0;
  background: #bbb;
  height: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

Upvotes: 2

pyron_orion
pyron_orion

Reputation: 635

Instead of changing height, change the border-top like this-

.active
{
   background: #bbb;
   border-top: 8px #bbb solid;
}

Upvotes: 0

Jared
Jared

Reputation: 582

You can add vertical-align:bottom; into your li, and then when it resizes it keeps the text on the bottom.

It might be worthwhile to rethink how you do this though, and just have a border or padding at the top that changes color, so the whole tab and contents dont move when clicked.

Upvotes: 0

HoomanMns
HoomanMns

Reputation: 161

Use vertical-align: bottom; like this:

li {
    display: inline-block;
    padding: 0 20px;
    background: #888;
    height: 30px;
    vertical-align: bottom;
}

Upvotes: 3

Related Questions