Same height for nav tabs

Question

I have a bootstrap tabs, and some of them have very long text, and it creates ugly space between tabs and content. How can I set the other tabs to have the same size as the biggest one?

<div class="tabs">
<ul class="nav nav-tabs nav-justified">
    <li>
        <a href="#" class="text-center">
            <i class="fa fa-wifi"/> Not that long</a>
    </li>
    <li>
        <a href="#" class="text-center">
            <i class="fa fa-map-marker"/> Something really really really long</a>
    </li>
    <li>
        <a href="#" class="text-center">
            <i class="fa fa-map-marker"/> Not that long</a>
    </li>
    <li class="active">
        <a href="#" class="text-center">
            <i class="fa fa-star"/> Not that long</a>
    </li>
</ul>
<div class="tab-content"></div>
</div>

Equal height columns with flexbox: http://stackoverflow.com/a/33815389/3597276 — Michael Benjamin, Jan 13 '16 at 00:26
That is not working for me, if I use flex on ul, tabs design becomes mess. — zdarsky.peter, Jan 13 '16 at 01:19
Can you post the CSS you're working with? Will help if we can reproduce the problem. — Michael Benjamin, Jan 13 '16 at 01:20
Find justified nav tabs exmaple on page, and just edit the nav tab content to something longer. http://preview.oklerthemes.com/porto-admin/1.5.1/ui-elements-tabs.html — zdarsky.peter, Jan 13 '16 at 01:22
@Michael_B I found a solution. Thank you, you were very helpfull. — zdarsky.peter, Jan 13 '16 at 01:37
I was one step away. Just needed to add flex properties to ``. I'm glad you found your solution. — Michael Benjamin, Jan 13 '16 at 01:39

zdarsky.peter · Accepted Answer · 2016-01-13T01:58:19.327

15

Found a solution!

<style>
.nav-tabs{
    display: flex;
}
.nav-tabs li {
    display: flex;
    flex: 1;
}

.nav-tabs li  a {
    flex: 1;
}
</style>

edited Jan 13 '16 at 01:58

answered Jan 13 '16 at 01:36

zdarsky.peter

6,188
9
39
60

Nice work. We were doing the same thing in parallel. Except `flex: 1` on the `a` wasn't working for me in dev tools so I was stuck on that. – Michael Benjamin Jan 13 '16 at 01:48

score 0 · Answer 2 · answered Jan 13 '16 at 00:26

0

You can either make them all taller or you can shorten the name of the tab that's too long. Tab names shouldn't really be very long anyways.

answered Jan 13 '16 at 00:26

gegillam

126
7

score 0 · Answer 3 · answered Jan 13 '16 at 00:33

0

If you can't use flexbox (which is not supported by older browsers), your only choice is to set all the tabs as tall as the tallest one explicitly with a pixel height. Flexbox is a great and sadly not yet fully usable solution to this kind of problem. Without it, there's no flexible way to accomplish this.

answered Jan 13 '16 at 00:33

ingridly

159
10

Flexbox is supported by all major browsers, except IE 8 & 9. See the [browser support tables](http://caniuse.com/#search=flex). Also, if flexbox isn't an option, there are table properties. – Michael Benjamin Jan 13 '16 at 00:44
2

You're right, I haven't looked at those tables in a while, but in the world of client work, the spotty support for IE 10 & 11, and the lack of it for old IE and old android makes it not an option for me. I totally agree with your comment though that it is the solution. – ingridly Jan 13 '16 at 00:46
I can use flexbox, but I can not make it work. Can you post a solution ? – zdarsky.peter Jan 13 '16 at 01:15
I just adapted the jsfiddle that was inside the stackoverflow answer in the comment on your original post. http://jsfiddle.net/ingridly/yuwqsrab/12/. I had to change your elements to spans because they were being read as a containing tag (like ``) and jsfiddle was barfing. That could also be an issue for you. Here's some opinions on using the `` element: http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span – ingridly Jan 13 '16 at 01:31

Same height for nav tabs

3 Answers3

Linked