I'm trying to make the header of my tabs responsive but it (the <li>) keep going outside of the parent's width. I'm looking this code since yesterday and I can't find the solution.

Please let me know if my code is not understandable or if I can do something more to make the question easier to understand, i'm pretty new to this stuff

/\ it should only work in min-width: 768px /\

I cleaned code and made a snippet for better understanding : https://jsfiddle.net/Demky/j72cbg9L/

html (tab header only, see jsfiddle for full code)

      <div id="tabContainer" class="tabs">
        <div class="tab-button-outer">
          <ul id="tab-button" class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link" href="#tab02" data-toggle="tab">Title_date</a></li>
            <li class="nav-item active"><a class="nav-link active categoriesFont4" href="#tab01"
                data-toggle="tab">actualy actualyactualy text home home homehome  blue red anticonstitutionellement</a></li>
            <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
            <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
          </ul>
        </div>

CSS


#tabContainer {
  font-family: 'Open Sans', sans-serif;
}

/* ul { */
.tab-button-outer {
  display: flex; /* establish flex container */
  background-color: yellow;
}

/* li { */
  .nav-link {
    flex: 1;
    background-color: lightgreen;
    border: 1px dashed black;
    justify-content: center;
    align-items: center;
  }

#tab-button {
  /* Comment purpel to see the yellow */
  background-color: purple;
  display: table;
  table-layout: fixed;
  /* ! Here if 100% activated, the tab dont go outside of parent */
  /* But then the text go outside of his parent */
  /* width: 100%; */
}

#tab-button li {
  display: table-cell;
}

#tab-button li a {
  display: block;
  padding: 0.5em;
  background-color: #135f63;
  border: 1px solid #02494d;
  text-align: center;
  color: #000;
}

#tab-button li:not(:first-child) a {
  /* Border for all tabs but the first */
  border-left: none;
}

#tab-button li:not(.is-active) a:hover {
  /* Hover a tab not current */
  background-color: #27858A;
}

#tab-button .is-active a {
  /* No border if current tab ! */
  border-bottom-color: transparent;
  background-color: #27858A;
}

#tab-button .disabled {
  /* .nav-item .disabled { */
  /* Change opacity ! */
  opacity: 0.65;
  font-style: italic;
  filter: alpha(opacity=65);

  /* DEACTIVATE CLICk */
  pointer-events: none;
}

.tab-contents {
  padding: .5em 2em 1em;
  background-color: #27858A;
  margin-top: 20px;
  border: 1px solid #0d5a5e;
  border-radius: 0 0 10px 10px;
}

.nav-tabs {
  /* Bootstrap 4 default border-bottom white */
  /* border-bottom: transparent; */
  border-bottom: 0px;
}

.nav-tabs .nav-link {
  /* border-top-left-radius: 0.50rem; */
  /* border-top-right-radius: 0.50rem; */
  border-radius: 10px 10px 0 0;
}

@media screen and (min-width: 768px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }

  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}

Screenshots

I espect the header (first picture - purpel area) to not go outside of (second picture - yellow area)

1/ Screenshot of the result

2/ Screenshot of the result

Expected result :

3


Futur : later I will try to make them all with the same height (the height of the taller) but i would like to fix this problem first

0 Answers