Overflow: hidden adds extra padding/height to tabs

Question

Disclaimer: I am not really familiar with CSS. I am using overflow: hidden to truncate text on dynamic Bootstrap tabs. When a second tab is created, all the tabs move up slightly because of the padding underneath. I'm trying to get rid of the extra padding because the bottom border appears when all the elements get moved up. I did some Googling, but using vertical align bottom or top does not eliminate the gap. I don't know if this has anything to do with it, but there is also a margin-bottom: -1px in order to hide the bottom border to get the effect of a connected tab.

I want it to look like how it looks without overflow:hidden checked.

unwanted space with overflow hidden

with overflow hidden

without overflow hidden

<div class=container-fluid" id="dashboard">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#overall-statistics" role="tab" aria-controls="Overall Statistics"><span>Overall Statistics</span></a>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="overall-statistics" role="tabpanel">
        <table>
          <tr>
              <td style="padding: 10px;">
                  View by 
              </td>
              <td style="padding: 10px;">
                    <select class="selectpicker" id="view-by" multiple title="Levels">
                      <option id="view-levels">Levels</option>
                      <option id="view-store-type">Store Type</option>
                    </select>
              </td>
          </tr>
        </table>
      </div>
      </div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

.nav-tabs .nav-item {
margin-left: -1px;
width: 150px;
}

.nav-tabs .nav-link {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}

just post the html for the whole tab and tab content part and the css that you applied — gabrielchl, Mar 10 '18 at 00:33
sorry it might be hard to help, but it'd be a whole ton of code if I posted all of it. that is the css I applied. the rest is bootstrap styling I believe — Lily, Mar 10 '18 at 00:44

score 0 · Answer 1 · answered Mar 10 '18 at 00:52

0

To eliminate the extra border, you may want to add this:

.nav-tabs .nav-link { border-bottom: none; }

answered Mar 10 '18 at 00:52

gabrielchl

606
9
20

border-bottom decreases the space added by overflow:hidden but there is still a space. I am wondering if there is a proper way to use overflow:hidden rather than trying to get rid of the space using hacky-y ways like changing margin-bottom so that it is aligned or something – Lily Mar 10 '18 at 01:03
@Lily the problem is i can't determine why the space is there from your inspect element screen captures, could u please make a capture of the space's css? – gabrielchl Mar 10 '18 at 01:06
I added more screenshots! – Lily Mar 10 '18 at 01:18
@Lily what would happen if u add overflow: visible? – gabrielchl Mar 10 '18 at 01:21
I need it to be hidden in order to truncate overflow text on the tabs – Lily Mar 10 '18 at 01:22

Overflow: hidden adds extra padding/height to tabs

1 Answers1