I want to have a material-ui listitem with has sticky subheaders. I managed to get this sticky, but the subheader is overlapping with the items when scrolling:
How to prevent this?
Full code:
<List
{...rest}
className={clsx(classes.root, className)}
subheader={<li />}
>
{pages.map(group => (
<li>
<ul className={classes.ul}>
{group.groupname && <><Divider /><ListSubheader>{group.groupname}</ListSubheader></> }
{group.routes.map(page => (
<div key={page.title}>
{page.children ?
<>
<ListItem
className={classes.item}
disableGutters
key={page.title}
>
{page.title}
</ListItem>
<Collapse in={state[page.title] ? true : false} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{page.children.map(childpage => (
<ListItem
className={classes.nested}
disableGutters
key={childpage.title}
>
{childpage.title}
</ListItem>
))}
</List>
</Collapse>
</>
:
<ListItem
className={classes.item}
disableGutters
key={page.title}
>
{page.title}
</ListItem>
}
</div>
))}
</ul>
</li>
))}
</List>
I expanded the example from the material-ui website
Well, the only workaround I found (using v4) was to style things a bit:
To the subheader elm: background: white
To the list root elm: overflow-y: auto
That way the subheader still overlaps with the underlying scrolling list, but it is not transparent, and the list handles its own scroll, preventing it from appearing on top of the sticky subheader when scrolling.
Currently having the exact same problem, with the addition of not being able to scroll to the bottom of my navbar whenever the list is fully extended:
I came up with a temporary solution, but I was unable to get the sticky feature of the subheader items to function without it overlapping with the content of the menu when scrolling.
For the overlapping issue, set disableSticky={true} on each of your ListSubheader elements. This should fix your specific issue.
My scrolling issue was caused by a top: 60 I had set in createMuiTheme To fix this I simply replaced top with padding:
/** Navigation Drawer **/
MuiDrawer: {
paper: {
paddingTop: 60,
width: 256,
minWidth: 150,
}
}
You should use disableSticky prop.
The problem is with the size of Collapse component. Try set the prop collapsedSize to "auto".
<Collapse ... collapsedSize="auto">...</Collapse>
collapsedSize: The height of the container when collapsed.
The doc Collapse API
Related
My problem its quite simple but i not know how to solve that, when the Drawer from MaterialUI is opened are added some css into the body in my page, and one of the css add a padding-right and that are screwing the page indentation.
Drawer closed:
Drawer opened:
The problem:
Code:
<React.Fragment key={"menu-button"} >
<MenuIcon onClick={toggleDrawer(true)} />
<Drawer
anchor={"left"}
open={state}
onClose={toggleDrawer(false)}
>
<Box
sx={{ width: 250, height: '100%'}}
className={styles.background}
role="presentation"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
<List>
{['About me', 'Projects', 'Experience', 'Education'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton className={styles.option}>
<ListItemIcon className={styles.optionIcon}>
{icons[index]}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
</Drawer>
</React.Fragment>
The styles are adding only colors.
I fixed adding "disableScrollLock={ true }" into the Drawer component :)
I have a List inside a Grid item with xs={12}, but I cannot figure out how to get the ListItems to spread across the entire width of the List's div. The list's secondaryAction button appears at the end of the div, but all the ListItems are densely packed on the left side.
<Grid item xs={12}>
<List sx={{ width: '100%' }}>
{theList.map((item, id) => (
<ListItem key={id} secondaryAction={<Button>Open</Button>}>
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>{item.name}</Typography>
<Typography>{item.address}</Typography>
<Typography>{item.phone}</Typography>
</AccordionSummary>
</Accordion>
</ListItem>
))}
</List>
</Grid>
Is the grid item inside a grid container? Does the container have a width? I can't reproduce your issue. Here is a codesandbox with a working example of ListItems taking up full width
I have a selectable menu items icons in React using Material UI with cornerRadius :
<Paper sx={{borderRadius: '25px'}}>
<List component={Stack} direction="row">
<ListItemButton>
<CropSquareRounded />
</ListItemButton>
<ListItemButton>
<CropSquareRounded />
</ListItemButton>
<ListItemButton>
<CropSquareRounded />
</ListItemButton>
</List>
</Paper>
When the mouse is over a item in this menu, the selection box do not fit the corner radius. The selection box is still rectangular.
see square corner on selection
How to fix this ?
You have to style the hover state of your ListItemButton to achieve what you want:
<ListItemButton
sx={{
"&:hover": {
borderRadius: "16px"
}
}}
>
Demo
I'd like to have a Drawer that doesn't overlay the page content. So far I have the following code
<ThemeProvider theme={oclockTheme}>
<main>
<Drawer
variant='temporary'
open={showMenu}
hideBackdrop
>
<List>
<ListItem sx={{ justifyContent: 'center' }}>
<img src={oclockLogo} alt="O'Clock logo" />
</ListItem>
</List>
<Divider light />
<List >
<ListItem>
Menu item
</ListItem>
</List>
</Drawer>
<Button onClick={() => setShowMenu(true)} variant="contained" color="primary">Teste</Button>
</main>
</ThemeProvider >
And the problem is that the Drawer overlays my button
And I'd like to push my bottom to the right when the Drawer is opened and pull it back to the left when it's closed...
I've seen a solution in the library docs, but I'd like to know if anyone else can help me doing it with a cleaner/smaller code. I also know that we have the SwipeableDrawer, but I couldn't find a way to change its styles...
Use persistent drawer instead.
Problem description
I am trying to put a chip inside a toolbar and am having problems with vertical alignment. I can fix it with overriding some styles of course, but as a real beginner I assume I'm doing something wrong i.e. not using the material-ui components in the right way?
Steps to reproduce
If I put a chip as a direct child of an appbar the chips fills the whole height incorrectly:
http://i.imgur.com/2mHKaIV.png
render() {
return (
<Toolbar>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</Toolbar>
)
}
If I wrap it in a list item it's height is correct but it still isn't centered in the toolbar:
http://i.imgur.com/Ksc5CTd.png
render() {
return (
<Toolbar>
<ListItem disabled={true}>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</ListItem>
</Toolbar>
)
What am I doing wrong?
(naturally I want it vertically centered in the toolbar and of the correct height for a chip)
Versions
Material-UI: 0.15.4
React: 15.3.2
Browser: Chrome 53.0.2785.116 (Mac OSX)
I was able to do a mockup (I hate how difficult it is to set up React/Material-Ui problems) and found the same issue. I think it's expected behavior from how the chip is positioned.
However, it is all fixed with margin: 'auto'
render() {
return (
<Toolbar>
<Chip style={{ margin: 'auto' }}>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</Toolbar>
)
}