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.
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 :)
Hi I am trying to write navigation list like below.
Codepen Link: https://9huof.csb.app/
https://codesandbox.io/s/nervous-water-9huof?file=/src/index.js
const NavList = () => {
const history = useHistory();
return (
<div>
<ListItem button onClick={() => history.push("/reports")}>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary='Reports' />
</ListItem>
<ListItem button onClick={() => history.push("/quiz")}>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText primary='Quiz' />
</ListItem>
</div>
);
};
Where ListItem called inside List from the functional component like below.
<Drawer variant='permanent' open={open}>
<Toolbar
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
px: [1],
}}
>
<IconButton onClick={toggleDrawer}>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<Divider />
<List>
<NavList />
</List>
</Drawer>
When I click on quiz it says "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:"
The problem is with the render props of your Route components. Use an inline function as seen here. So you need to change your Routes from this:
<AuthRoute path="/quiz" render={Quiz} />
to this:
<AuthRoute path="/quiz" render={() => <Quiz />} />
Instead of render in your route change the prop to component like so
<AuthRoute path="/quiz" component={Quiz} />
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
Why is it showing ugly left grey margin? I tried with many different List and it's still printing left grey margin. Is this common?
I followed Native-base document : http://docs.nativebase.io/Components.html#list-avatar-headref
import { Container, Content, List, ListItem, Text, Left, Body, Thumbnail } from 'native-base';
import { View, AsyncStorage } from 'react-native';
...
render() {
return (
<View style={{flex:1}}>
<Content>
<List>
{this._renderProfile()}
<ListItem>
<Left>
<Text>! Edit Profile</Text>
</Left>
</ListItem>
<ListItem onPress={this._changePassword}>
<Left>
<Text>Change Password </Text>
</Left>
</ListItem>
<ListItem>
<Left>
<Text>! Language Setting</Text>
</Left>
</ListItem>
<ListItem onPress={this._showModal}>
<Left>
<Text>Logout</Text>
</Left>
</ListItem>
</List>
</Content>
{this._drawModal()}
</View>
p.s Do you like using Native-Base for UI?
I use like this:
render() {
return (
<ListItem style={{marginLeft: -15, paddingLeft: 15}}>
<Left>
<Text>! Language Setting</Text>
</Left>
</ListItem>
);
}
and you should add avatar or icon. exm: <ListItem icon | avatart />
I have used this but its works fine for me.
i think you should check your parent file if margin on left side.
so i prefer 100% parent width.
I want to add my react-router links to Drawer. I tried this:
<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
<Link to="/businesspartners">
<MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
rightIcon={<CommunicationBusiness />}
>
Business Partners
</MenuItem>
</Link>
</Drawer>
My problem is that the link will render underlined (like the image below).
I had similar concerns with using styles directly and came across the following answer: https://stackoverflow.com/a/48252439/522859
To summarize, use the component attribute on the ListItem:
<List>
<ListItem button component={Link} to="https://www.google.com">
<ListItemText primary="Google" />
</ListItem>
</List>
The official docs cover it here: https://material-ui.com/api/list-item/
Use inline style textDecoration: 'none' for the link.
<Link> gets rendered as a standard <a> tag, which is why we can apply textDecoration rule there.
<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
<Link to="/businesspartners" style={{ textDecoration: 'none' }}>
<MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
rightIcon={<CommunicationBusiness />}
>
Business Partners
</MenuItem>
</Link>
</Drawer>
I have faced the same issue but maybe a new update in materialUI due to this is not working,
There has some tweak as import from import Link from '#material-ui/core/Link';
so it will works
import Link from '#material-ui/core/Link';
<List>
<ListItem button component={Link} href="/dsda">
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="DashBoard"/>
</ListItem>
</List>