How to remove the extra space in the material-ui's scrollable tabs?

Question

Take a look at this example:

https://material-ui.com/demos/tabs/#scrollable-tabs

How can I remove this extra space if there is no arrow:

Thanks.

Answer 1

TabScrollButton component is responsible for displaying the arrows. You can apply custom styles to it. If you just hide the arrows the whole tab menu will jump. I would recommend just reducing the widths of the arrows so the gap is not so wide. If you however insist on hiding them altogether we could apply some transition and reduce the widths of inactive arrows to 0.

import TabScrollButton from '@material-ui/core/TabScrollButton';
import { withStyles} from '@material-ui/core/styles';

const MyTabScrollButton = withStyles(theme => ({
  root: {
    width: 28,
    overflow: 'hidden',
    transition: 'width 0.5s',
    '&.Mui-disabled': {
      width: 0,
    },
  },
}))(TabScrollButton);

<Tabs 
  ScrollButtonComponent={MyTabScrollButton}
  variant="scrollable"
  scrollButtons="auto"
>

Answer 2

You can do this by giving padding to Tab component using style Like in this example.

<Tabs value={value} onChange={this.handleChange}>
    <Tab style={{paddingLeft: 0, paddingRight: 0}} label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
</Tabs> 

Answer 3

This is a space for scrollable arrows. You can use simple tab version without

scrollable

property and empty space will be removed.

Alternatively you can replace current scrollable arrows with your component with proper styles, like absolute positioning etc. for example:

        <Tabs
          ScrollButtonComponent={() => {
            return (
              <a style={
               { height: "10px", position: "absolute" }}>
                scroll
              </a>
            );
         />

Answer 4

This should remove the space, scrollable means the navbar can be scrolled if the navbar cannot fit within its viewport, this adds by default a space between the text to account for the arrows.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
});

class ScrollableTabsButtonAuto extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            indicatorColor="primary"
            textColor="primary"
            scrollButtons="auto"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
        {value === 3 && <TabContainer>Item Four</TabContainer>}
        {value === 4 && <TabContainer>Item Five</TabContainer>}
        {value === 5 && <TabContainer>Item Six</TabContainer>}
        {value === 6 && <TabContainer>Item Seven</TabContainer>}
      </div>
    );
  }
}

ScrollableTabsButtonAuto.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ScrollableTabsButtonAuto);

Hope this helps :)

Answer 5

I solved this using CSS

.parentDiv div[class*="MuiTabs-scrollButtonsAuto"] {
    display: none;
}

; where .parentDiv is the class name of the parent div.

One of the 2 empty boxes will contain class MuiTabs-scrollButtonsAuto- nnn , vice versa.

Caveat: This may not work on production build, since the MUI classes will be shortened to jss-like class names ie .jss3001 (not familiar what plugin does the minification during the build). I am encountering this issue on production build.

Update: Here's a work around for build versions where class names are minified or converted to short-hand class names. Basically, the tabs are sandwiched between the 2 scroll arrows, one of which is of type button when active. This solution locates those divs as the 1st and 3rd child. May not be flexible, but you will use 1 MUI Tab version anyway. This works for both development and production builds.

.parentDiv > div:nth-child(2) > div:nth-child(1):not([type="button"]) {
    display: none;
}
.parentDiv > div:nth-child(2) > div:nth-child(3):not([type="button"]) {
    display: none;
}

Answer 6

An alternative that I riffed on using styled

const MyTabScrollButton = styled(TabScrollButton)({
    '&.Mui-disabled': {
        width: 0,
    },
    overflow: 'hidden',
    transition: 'width 0.5s',
    width: 28,
});