CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

How to set same heights for bootstrap tabs?

I have a simple tabs menu which also contains input controls.

enter image description here

enter image description here

<ul class="nav nav-tabs">
    <li role="presentation" class="">
        <a>tab4</a>
    </li>
    <li role="presentation" class="active">
        <a><input value="tab5"/></a>
    </li>
</ul>

After I added the input, now the tabs have some inconsistences regarding the styling. How can I set the same heights for tabs ?

Here is the jsfiddle : jsfiddle

Upvotes: 0

Views: 233

Answers (3)

Edison Biba
Edison Biba

Reputation: 4413

Here is the updated jsfiddle with working example

The problem here is because input has border and it increases the height of the input tab.

You can set the height of your other tab greater than input.

.nav li > a {
    line-height: 26px
}

.nav li > a input{
    line-height: 20px
}

So depending on your input height you want just add 6 more pixels to other tabs

You can also use flex to do this dynamically so giving flex to tabs would work but you need to check how to works with your other components.

.nav.nav-tabs, .nav.nav-tabs > li{
    display: flex;
}

Upvotes: 0

Pete
Pete

Reputation: 58422

If you don't want to set a fixed height, you can make both your ul and li flex (below adds a flex-tabs class to the nav-tabs ul):

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

body {
  padding: 20px;
}

/* Choose max-size of panel */
.panel--sections {
  max-width: 800px;
}

/* Give some top and bottom padding for the columns */
.col-sm-6 {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Give col-left a border at bottom if on mobile */
.col-left {
  border-bottom: 1px solid #dddddd;

}

@media (min-width: 768px) {

  /* Give col-left a border on right if on bigger screen */
  .col-left {
    border-right: 1px solid #dddddd;
    border-bottom: 0;
  }
}

.flex-tabs,
.flex-tabs li {
  display: flex;
}
<ul class="nav nav-tabs flex-tabs">
  <li role="presentation" class="">
    <a>tab4</a>
  </li>
  <li role="presentation" class="active">
    <a><input value="tab5" /></a>
  </li>
</ul>

Upvotes: 1

Sumit Patel
Sumit Patel

Reputation: 4638

To fix this you can play with input height.

.nav li.active input {
  height: 20px;
}


body {
  padding: 20px;
}


/* Choose max-size of panel */

.panel--sections {
  max-width: 800px;
}


/* Give some top and bottom padding for the columns */

.col-sm-6 {
  padding-top: 15px;
  padding-bottom: 15px;
}


/* Give col-left a border at bottom if on mobile */

.col-left {
  border-bottom: 1px solid #dddddd;
}

@media (min-width: 768px) {
  /* Give col-left a border on right if on bigger screen */
  .col-left {
    border-right: 1px solid #dddddd;
    border-bottom: 0;
  }
}

.nav li.active input {
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-tabs">
  <li role="presentation" class="">
    <a>tab4</a>
  </li>
  <li role="presentation" class="active">
    <a><input value="tab5" /></a>
  </li>
</ul>

Upvotes: 1

Related Questions