CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
john
john

Reputation: 1085

textAlign right not working for custom vertical tab label in material-ui

I am overriding the tabs of material-ui to have a vertical view of the tabs. However, I also want the label (text) of these tabs to align to the right so it looks more uniform. I've tried every kind of styling but still cannot get it to work.

<VerticalTabs
      value={tabValue}
      indicatorColor={'primary'}
      onChange={this.handleTabChange}


    >
      <MyTab
        disableRipple
        lableStyle={{float: 'right'}} <----- doesn't work
        label="Sourcing"
      />
        <MyTab
        disableRipple
        lableStyle={{float: 'right'}}
        label="Production"
      />
      <MyTab
        disableRipple
        lableStyle={{float: 'right'}}
        label="Shipping"
      />
      <MyTab
        disableRipple
        lableStyle={{float: 'right'}}
        label="Sales"
      />
    </VerticalTabs>

override styling:

const VerticalTabs = withStyles(theme => ({
  flexContainer: {
    flexDirection: 'column',
  },
  indicator: {
    display: 'none',
  },
  tabsRoot: {
    textAlign: 'right'
  }

}))(Tabs)

const MyTab = withStyles(theme => ({

  root: {
  borderRight: '2px solid lightgray',
  textAlign: 'right'


  },
  selected: {
    color: '#4ABDAC',
    borderRight: '3px solid #4ABDAC',
    textAlign: 'right'


  },
  label: {
    fontSize: 20,


    textTransform: 'initial',
  },


}))(Tab);

Can anyone point me in the right direction to align the label text to the right side of the tab container?

Upvotes: 2

Views: 6083

Answers (2)

Sanath Kumar
Sanath Kumar

Reputation: 163

The Tab component in material ui has a wrapper with align-items: "center" css(MuiTab-wrapper) applied to it. You need to override this and change it to "flex-start" or "flex-end" https://material-ui.com/api/tab/

wrapper: {
    alignItems: "flex-start"
}

Upvotes: 3

john
john

Reputation: 1085

Upgrading to the lates version of material-ui fixed this issue (v3.9.1 currently)

Upvotes: -1

Related Questions