[Tabs] Change tab height

[ankitgoyal100]

Is there a way to change the tab height so it is not 48px tall?

[lucasbento]

Yes, just use the style prop, please read the documentation before opening an issue, also, use stackoverflow for that kind of regular question.

[ankitgoyal100]

@lucasbento I read the documentation but I couldn't get it to work. Do I use the style prop on the Tabs element or the Tab element?

[lucasbento]

@ankitgoyal100: sorry, I read wrong and thought you questioned about <AppBar />, the style prop is passed to <Tabs /> as specified on the docs:

[ankitgoyal100]

@lucasbento no problem. I passed in style={{height: 32}} and the tab height didn't change. I also played with the tabItemContainerStyle and contentContainerStyle props and had no luck. It seems like the direct parent div of the tab has a hard-coded height of 48px. Is there any way to change that?

[lucasbento]

@ankitgoyal100: it works with tabItemContainerStyle.

[ankitgoyal100]

@lucasbento this is what happens when I set the height in the tabItemContainerStyle:

[lucasbento]

@ankitgoyal100: Can you please reproduce that issue on a bin?

[JGitHub01]

I encountered the same issue where both 'Tab' (NOT 'Tabs') properties 'className' and 'style' do NOT seem to be applied to the root element. In my case, I am trying to use
style={{ flex: 1, alignSelf: 'stretch' }}
so that the tab will take up the whole space (both height and width) of the tabs container. The 'Tabs' has the following 'style' property:
style={ { flex: 1, display: 'flex', flexDirection: 'column' } }

Here is the whole relevant code:
render() { return (<Tabs style={ { flex: 1, display: 'flex', flexDirection: 'column' } } tabItemContainerStyle={ { order: 2 } } contentContainerStyle={ { flex: 1, order: 1, alignSelf: 'stretch', display: 'flex', flexDirection: 'column' } } value={this.state.value} onChange={this.handleChange}> <Tab className='jcq-view' style={{ flex: 1, alignSelf: 'stretch' }} icon={<FontIcon className="fa fa-line-chart" aria-hidden="true"/>} label="Charts" value='charts'> <ChartsView /> </Tab> <Tab style={{ flex: 1, alignSelf: 'stretch' }} icon={<FontIcon className="fa fa-bar-chart" aria-hidden="true"/>} label="Analytics" value='analytics'> <div> <p> This is the Analytics View </p> </div> </Tab> <Tab style={{ flex: 1, alignSelf: 'stretch' }} icon={<FontIcon className="fa fa-usd" aria-hidden="true"/>} label="Trading" value='trading'> <div> <p> This is the Trading View </p> </div> </Tab> </Tabs>);

[JGitHub01]

It looks like there is some misunderstanding on what the root element of 'Tab' refers to. By inspecting the dom tree in browser, I found that the root element of 'Tab' is the tab button. I think both ankitgoyal100 and I confused the 'Tab' root element with the 'Tab' panel itself. The 'Tab' panel is actually a child inside the content container. If my understanding is correct now, then there does not seem to be an API for setting the style of the root of each 'Tab' panel.

[oliviertassinari]

An initial migration of the Tabs component has been merged on the next branch.
You can use the className or the style property on the <Tab /> component to change the height. That may not be ideal, we could move the height into a theme property. I'm closing this issue.
If you find a workaround for the master branch. We would still accept a PR for it 👍 .
Thanks.

[jr69]

If you change the source code directly, you can edit the height. But I don't know how you can edit the style, so we'll have to wait for the next release. Also if you do this, it changes all of the tabs

[oliviertassinari]

@jr69 You should be able to use the style property. The key is to target the right elements.

[jr69]

@oliviertassinari Is this in the stable release or the upcoming one? Also I tried changing size in the style for the element, but nothing happened. So my hacky work around by editing the source code works fine for me, albeit limited since I can't have more than one different styling of a tab

[oliviertassinari]

@jr69 That should be true with whatever version you are using. If you can't, that should be considered a bug.

[jr69]

@oliviertassinari Either I implemented it wrong, or its not working. If you go to http://www.material-ui.com/#/components/tabs and scroll down, every property with 'style' in it, I literally assigned all with an inline style of {{height: '16px'}}, and the text didn't change.

I looked the console, and noticed that the text in the tab itself was in a span, that was below the 'tab' div itself (that element was the one that got the changed height).

[jlichti]

Same issue - looking at the code for Tab it appears the Button component has a height assigned but no way to update the style.

[ruskotron]

Happy to see it's not just me having this issue. Bleeping stupid ...

It's assigned a hard-coded value of 48px in Tab.js with no way to override.

function getStyles(props, context) {
  return {
...
    button: {
      height: props.label && props.icon ? 72 : 48 <<== ** Hard-Coded Value **
    }
  };
}
...
      var styles = getStyles(this.props, this.context);
...
        _react2.default.createElement(
          'div',
          { style: styles.button },
          iconElement,
          label
        )

[AliceR]

It is possible to specify the height using the buttonStyle prop on every Tab

[m6cheung]

@AliceR This works!

[petrcherni]

Maybe somebody will be interested in my way of solving the height problem with the latest version (v4.0.0-beta.2).

In my situation I had to minimize the height of the tab. @AliceR's solution, to change it using the buttonStyle didn't work for me, because of the minHeight:48px in the component stylings.

So I set minHeight:0 in Tab (and) Tabs in the classes root key

Then one can change the height (if needed), otherwise the height will be dynamically depending on the children heights

[oliviertassinari]

@petrcherni https://codesandbox.io/s/material-demo-49ycq

const StyledTab = withStyles({
  root: {
    minHeight: "auto",
    padding: 0
  }
})(Tab);

[brianjesusmv]

WORKS

const AntTabs = styled(Tabs)({
    height: '32px',
    minHeight: '32px',
    borderBottom: '1px solid #e8e8e8',
    '& .MuiTabs-indicator': {
        backgroundColor: '#000000',
    },
});

const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
    setValue(newValue);
};

[brianjesusmv]

appliance of above example...
AntTabs ==> custom component

<Box sx={{ bgcolor: '#fff' }}> <AntTabs value={value} onChange={handleChange} variant="fullWidth"> <Tab label="one" /> <Tab label="two" /> </AntTabs> </Box>

[nkalpakis21]

Was having this problem too. With the help above it seems like setting minHeight is the key here

<Tab sx={{ minHeight: '36px', height: '36px' }} />

[nkalpakis21]

Thanks for starting this thread ankitgoyal100 hope you are currently making billions more than the ass who responded to you like that

[luizhmileck]

Was having this problem too. With the help above it seems like setting minHeight is the key here

<Tab sx={{ minHeight: '36px', height: '36px' }} />

This totally worked for me thx man, easiest fix, long time to find it.

[misafu]

<Tab sx={{ minHeight: '36px', height: '36px' }} />

Thank you! I also had to set the same sx props for the Tabs element too, but was customising with state classes