2

So the conditions that I would like to achieve is

  • Width of each tab is based on the label
  • All tabs are the same size as the longest tab (with longest label)
    • As such the tab group should not be fixed or take up 100% of parent. Should be based on longest tab.
  • The layout of the tabs are side by side.

This is my progress so far (not same width as largest): https://jsfiddle.net/cyhwx7z0/5/

I have tried this solution but the layout is not side by side. https://jsfiddle.net/alexkwa/L9oy6hbp/1/

HTML

<div class="wrapper">
  <ul class="tab-group">
    <li class="single-tab">Tab 1</li>
    <li class="single-tab">Tab 2</li>
    <li class="single-tab">Very Long Tab Name</li>
    <li class="single-tab active">Tab 4</li>
    <li class="single-tab">Tab 5</li>
  </ul>
</div>

SCSS

$active-color: #262933;
$inactive-color: #B3B4B8;
$inactive-font-color: #8B8C8F;
$border-thickness: 1px;
$border-radius: 3px;

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: inline-block;
}

.tab-group {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.single-tab {
  background-color: #fff;
  border: $border-thickness solid $inactive-color;
  border-right: 0;
  border-sizing: border-box;
  color: $inactive-font-color;
  cursor: normal;
  font-size: 14px;
  padding: 9px 21px;
  margin: 0;  
  margin-left: -6px;
  user-select: none; 

  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.single-tab:first-child {
  border-radius: $border-radius 0 0 $border-radius;
}

.single-tab:last-child {
  border-radius: 0 $border-radius $border-radius 0;
  border-right: $border-thickness solid $inactive-color;
}

.single-tab.active {
  background-color: $active-color;
  border: $border-thickness solid $active-color;
  color: #fff;
}

.single-tab.active + .single-tab {
  border-left: 0;
}

.single-tab:last-child.active {
  border-left: 0;
}

Any ideas?

Alex
  • 21
  • 2

1 Answers1

0

Try this

.tab-group {
  display: flex; // instead of inline flex
  ... all other styles
}

.single-tab {
  flex: 1; // makes your tabs of same width
  ... all other styles
}

Here's the working fiddle - https://jsfiddle.net/flexdinesh/xuc6amcu/2/

If you require the parent to not take up the full width, you have to define it manually, say 60%. Example fiddle - https://jsfiddle.net/flexdinesh/xuc6amcu/3/

Dinesh Pandiyan
  • 5,814
  • 2
  • 30
  • 49
  • Thanks for this, but the makes the entire tab group 100%, which is not what I am trying to do. The width should be based on longest tab. So longest tab width multiply by number of tabs. I updated the question to be clearer. – Alex May 29 '18 at 05:36
  • @AlexK - If you want the tabs to have dynamic width, you have to define the parent to be flex as opposed to inline-flex. One way to control the parent width would be to define it explicitly, say 60%. I have update the link as an example to define the parent to have manual width. – Dinesh Pandiyan May 29 '18 at 06:21
  • Thanks for this. As mentioned, the length of the tabs should be based on the longest label, so the parent should not be 100% nor should it have a defined width. – Alex May 29 '18 at 23:41