Add multiline feature for tabs

[jabyess]

This is about Bulma.

Feature

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 0.6.0

My browser is: Chrome 61

Fairly sure this issue is not a duplicate

Description

I'd love to have some way to stack tabs vertically on mobile devices. Right now it overflows and scrolls horizontally, but ideally we would have a flag to set on the tabs parent container that stacks vertically.

What I did in the meantime is set .tabs ul to flex-direction: column and that works well enough, but it's not pretty and doesn't respect the fullwidth feature.

Not sure what the best way is to handle this.

Thanks!

[mav1283]

@jabyess How do you add the content to the tab? the documentation only had the tab links:

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

Where to put the content?

[jabyess]

@mav1283 you can put them wherever you want. Bulma doesn't care, since it's just css/sass, there's no functionality included.

I just created a container with multiple content elements below the tabs. the elements each have an ID, and the tabs have a data attribute pointing to the appropriate ID. Very similar to how bootstrap does it.

[stephendolan]

If anyone stumbles across this issue looking for a responsive solution:

@include mobile {
  .tabs ul {
    flex-direction: column;

    li {
      width: 100%;
    }
  }
}

[tevart]

Any way to have two tabs in row?

edit: Found solution

.tabs ul {width:100%;flex-direction:row;flex-wrap:wrap;}
.tabs li {width:50%}

[srinathreddydudi]

If any one stumbled across this issue looking for vertical tabs:

<div class="tabs">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
</div>
<div class="tabs-content">
    <div>Tab 1 content</div>
    <div>Tab 2 content</div>
    <div>Tab 3 content</div>
</div>

.tabs{
    float: left;
}
.tabs ul{
    -webkit-flex-direction: column;
    flex-direction: column;
}

This will display tabs on the left side and the tab content on the right. Not an optimal solution but works for some one who have too many tabs.

[GopherJ]

I'm surprised that this hasn't been implemented in 2019~

[IlyaSemenov]

Multiline tabs:

.tabs ul {
	flex-shrink: 1;
	flex-wrap: wrap;
	border-bottom-color: transparent;
}

The border-bottom-color rule removes the long hanging line on the last row of tabs.

[moladukes]

Anyone coming across this. The above solutions don't really address the border radius.

@media screen and (max-width: 768px)  {
      .tabs.is-toggle ul {
        flex-direction: column;
        li {
          width: 100%;
          &:not(:last-child) a {
            border-bottom-color: transparent;
          }
          &:first-child a {
            border-radius: 4px 4px 0 0;
          }
          &:last-child a {
            border-radius: 0 0 4px 4px;
          }
        }
      }
    }

[ownchoice]

Multiline tabs:

.tabs ul {
	flex-shrink: 1;
	flex-wrap: wrap;
	border-bottom-color: transparent;
}

The border-bottom-color rule removes the long hanging line on the last row of tabs.

Simple and effective, thanks a lot!

[Alexander-Jordan]

If anyone stumbles across this issue looking for a responsive solution:

@include mobile {
  .tabs ul {
    flex-direction: column;

    li {
      width: 100%;
    }
  }
}

@stephendolan solution worked best for me, and with @moladukes comment, my end result was this:

@include mobile {
  .tabs ul {
    flex-direction: column;

    li {
      width: 100%;

      a {
        border-radius: 4px;
      }
    }
  }
}

EDIT 2022-06-16: Something I didn't think of was when using tabs with is-boxed class. It doesn't look pretty with this, and I also ended up keeping the way @moladukes solved the radius (to keep the items more merged). Result in the end:

@include mobile {
  .tabs:not(.is-boxed) {
    ul {
      flex-direction: column;

      li {
        width: 100%;
      }
    }

    &.is-toggle {
      li {
        &:not(:last-child) a {
          border-bottom-color: transparent;
        }

        &:first-child a {
          border-radius: 4px 4px 0 0;
        }

        &:last-child a {
          border-radius: 0 0 4px 4px;
        }
      }
    }
  }
}