4

I'm using Semantic-UI React. 

<Tab
  menu={{
    fluid: true,
    vertical: true,
    tabular: true
  }}
  panes={this.getTabPanes()}
/>

It works fine, but Tab headers are two wide. enter image description here

How to change it to the absolute value (100px for example)?

Valerii
  • 2,147
  • 2
  • 13
  • 27

1 Answers1

2

If you take a look at the docs for Tab, there is a prop called grid that accepts an object with two values for those grid column widths. For instance, you can pass this and it will change the size grid={{paneWidth: 6, tabWidth: 2}}

brianespinosa
  • 2,408
  • 12
  • 22
  • Hi. Thanks for your answer. It would work, but it's a relative size in "columns". I want to set that size to let's say 100px. – Valerii Oct 11 '18 at 15:28
  • 1
    What you are trying to achieve would require you to add custom css. Those props are only for defining the grid column width the way they are defined in the main Semantic UI styles. You can pass a class or id to Tab and then write CSS to target `.my-class > .ui.grid. > .two.wide.column {}` – brianespinosa Oct 11 '18 at 15:56
  • I've already had a look at the semantic-UI react code and I think you are right. It's the only way to do it :(. Thanks for the help. – Valerii Oct 11 '18 at 16:12
  • Glad I could help. If it turns out that this solved your problem, consider marking this answer as correct. – brianespinosa Oct 11 '18 at 19:15
  • 1
    would you guys know if this is exclusive to the vertical tabs? the `grid={{paneWidth: 6, tabWidth: 2}}` property does absolutely nothing on my side no matter what values I use. – keponk May 28 '20 at 09:57
  • yes, that setting is only for vertical tab menu – Breakpoint25 Dec 09 '21 at 23:36