Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabIndicator in wrong position if scrollbars appears later #13263

Closed
2 tasks done
FalkNisius opened this issue Oct 16, 2018 · 1 comment
Closed
2 tasks done

TabIndicator in wrong position if scrollbars appears later #13263

FalkNisius opened this issue Oct 16, 2018 · 1 comment
Labels
duplicate This issue or pull request already exists

Comments

@FalkNisius
Copy link

I have some pages where navigation is done with Tabs (centered) and Tab Component. After loading the component, asynchronous data are loaded. The painting of the changed react component, let appears vertical scrollbars and the Tabs are moved left and TabIndicator hold its place, because it is absolute positioned. After resizing the window or a new navigation, the position is correct.

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The tab indicator should be at all circumstances under the tab after navigation is ready:

image

Current Behavior

The tab indicator is placed a half scrollbar width too much right, because on appearing of the scrollbar the centered tabs are moved to center automatically, but the tab indicator not:

image

Steps to Reproduce

It is easier to see if the active tab component has an background-color.
It is only reproducable if scrollbars in the browser are visible and are shown after navigation is completely done. Sorry that I can't produce fast a fiddle for it.

const styles = theme => ({ tabSelected: { backgroundColor: '#f5f5f5' } })

<Tabs value={self.state.tab} onChange={(event, value) => {self.setState({tab: value})}}
                centered
                indicatorColor="secondary"
                textColor="secondary" className='topNavigation'>
            <Tab value={0} label='Installations' component={Link} to='/monthly'
                 classes={{selected: classes.tabSelected}}/>
            <Tab value={1} label='Usages' component={Link} to='/usages/monthly'
                 classes={{selected: classes.tabSelected}}/>
            <Tab value={2} label='Clients' component={Link} to='/clients'
                 classes={{selected: classes.tabSelected}}/>
          </Tabs>

Context

Your Environment

Tech Version
Material-UI v3.2.1
React 16.5.2
Browser Chrome 69.0.3497.100
@oliviertassinari oliviertassinari added the duplicate This issue or pull request already exists label Oct 16, 2018
@oliviertassinari
Copy link
Member

@FalkNisius I'm closing as a duplicate of #9337.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants