marmelab
A lot of tabs shows scrollbar and crashes the application
Example app: https://pp0o4x40p0.codesandbox.io/#/posts/13
I just copied the last tab a couple of times and you'll see a scrollbar at the bottom.
What I expected: that the Tabs component would be scrollable and the application not to crash.
I think this is because the Tabs parent width is implicit instead of explicit.
So I believe it's because the clientWidth can't be calculated correctly. This can be fixed by adding minWidth:0 on the content class of the Layout component.
@tkvw Would you mind sharing the link to your codesandbox reproducing the issue? I couldn't do better than https://codesandbox.io/s/k3wpror8yv.
I think react-admin, what I've debugged is that the tabs container needs a fixed width container. Setting minWidth accomplishes this.
I think is a materia-ui bug however I could fixed it by setting the classes passed to <TabbedShowLayoutTabs> with a {width: 0}. Defined a styles object like:
const styles = {
tabs: {
width: 0
}
}
Used with with my Show resource component:
export ResourceShow = withStyles(styles)(ResourceShowView);
And in my view added that class to <TabbedShowLayoutTabs>:
import { Show, TabbedShowLayout, TabbedShowLayoutTabs } from 'react-admin'
const ResourceShowView = ({ classes, ...props}) => (
<Show {...props} >
<TabbedShowLayout tabs={<TabbedShowLayoutTabs classes={{scrollable: classes.tabs}} scrollable scrollButtons={'on'}/>}>
{<YourTabs/>}
</TabbedShowLayout>
</Show>
)
I don't know why this happens, but it worked! 😃
PS: Don't know nothing about crashing 😢
I reproduced with the latest versions (v2 + v3) and the bug is still there. Still, the app doesn't crash.
#4538 breaks FormTabs, we have to revert it in #5132. Therefore, we keep this issue open.
@tkvw can you assign me this issue, if anyone is not working on it for now ?
