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.
How to change it to the absolute value (100px for example)?
Add a comment
|
1 Answer
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}}
6 Comments
Valerii
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.
brianespinosa
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 {}Valerii
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.
brianespinosa
Glad I could help. If it turns out that this solved your problem, consider marking this answer as correct.
keponk
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. |