I'm creating a single-page application (Material-UI based) with an AppBar (+ ToolBar) and a Drawer. At the moment, the Drawer overlaps the AppBar and under no circumstances can I get the Drawer to move down, so it is basically positioned right under the AppBar.
I tried adding some padding, but this does not do anything. I'm using makeStyles for styling of most of the components, and I am wondering if it is even possible to position the Drawer below the AppBar.
Is there any way to position the drawer below the AppBar?
I have a lot of code, but the makeStyle function is simple:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
title: {
flexGrow: 1,
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
drawer: {
paddingTop: 30
},
}));
and the main component (that includes the Drawer:
<div className={classes.root}>
<AppBar position="absolute" >
<Toolbar>
<Typography component="h1" variant="h6" noWrap className={classes.title}>
x
</Typography>
<Switch checked={isDarkTheme} onChange={handleThemeSwitch}/>
<WbIncandescentIcon />
</Toolbar>
</AppBar>
<ServiceDrawer className={classes.drawer}
onOperationSelected={onOperationSelect} serviceList={services} onDrawerOpen={onDrawerOpen} onDrawerClose={onDrawerClose}>
</ServiceDrawer>
<main className={classes.content}>
<div className={classes.toolbar} />
{selectedOperation && <Operation operation={selectedOperation}/>}
</main>
</div>
You need to set the variant of the Drawer to permanent so that it does not create an overlay over the current page, and put it inside the current app layout. Because the Drawer position is fixed, you also have to set the AppBar to fixed so they're on the same stacking context, and the z-index will be applied correctly, to put it in code:
<Drawer variant="permanent"
<AppBar position="fixed"
And finally the zIndex itself
appBar: {
zIndex: theme.zIndex.drawer + 1
},
Reference
https://v4.mui.com/components/drawers/#clipped-under-the-app-bar
Related
I'm wrapping all the widgets in a CardMedia component, and setting an image.
return (
<CardMedia image={bg} className={classes.bg}>
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container justify="center" spacing={4}>
{products.map((product) => (
<Grid item key={product.id} xs={12} sm={12} md={12} lg={6}>
<Product product={product}></Product>
</Grid>
))}
</Grid>
</main>
</CardMedia>);
I need to make the image a little darker.
Here is the code for the styles:
export default makeStyles((theme) => ({
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
backgroundColor: "transparent",
/* backgroundColor: theme.palette.background.default, */
padding: theme.spacing(3),
[theme.breakpoints.down("lg")]: {
paddingRight: 200,
paddingLeft: 200,
},
[theme.breakpoints.down("xl")]: {
paddingRight: 200,
paddingLeft: 200,
},
[theme.breakpoints.down("sm")]: {
padding: theme.spacing(3),
},
},
root: {
flexGrow: 1,
},
bg: {
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
},
}));
Maybe there is even a simpler way to create a background image with a darker tint?
Also, I don't know if this has to do with anything, but when I set the image with CardMedia, every time I scroll to the bottom of the page there is a short annoying lag. Thanks in advance.
Hi you should try to use this for made your image darker is a simple CSS function :
.img { filter: “brightness(50%)”; }
Also change your component if you not rendering any childrens inside :
<Product><\Product>
to
<Product />
I have a toolbar where I am using 2 icons that appear on the left end. Currently, I am using this styling method:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
panelheaderRight: {
marginRight: 0,
right: 0,
},
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
// justifyContent: spaceBetween,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3),
},
}),
);
I want the icons to appear on the right end. If I add a separate css file with this, it works:
.toolbar-class{
justify-content:space-between;
}
but I want to use it inside the createStyles. There's no 'space-between' option in createStyles. This is how a portion of my component looks like:
<AppBar position="fixed" className={classes.appBar}>
<Toolbar className="toolbar-class">
<Typography variant="h6" noWrap>
Al
</Typography>
<div className="panelheaderRight">
<NotificationsIcon />
{/* <ExitToAppIcon onClick={() =>
<ExitToAppIcon onClick={logout}></ExitToAppIcon>
</div>
</Toolbar>
</AppBar>
Is there any way I can move the icons to the left using createStylesand without adding a separate css file?
Some notice points:
Change justify-content to justifyContent, and value as string.
No need to use createStyels for makeStyles
const useStyles = makeStyles((theme: Theme) => ({
toolBar: {
justifyContent: 'space-between'
},
...
...
<Toolbar className={classes.toolBar}>
I'll show you exactly what I mean here. (it's a short video demonstrating exactly how this problem is reproduced and the missing css elements)
I also have screenshots of before:
and after:
Via inspect element it's clear that important css elements just straight up disappear, and it doesn't make any sense why that would happen specifically after clicking on a link, coming back, and refreshing.
Has anyone run into a similar problem with material-ui before or think you might know why the css is breaking?
EDIT: console is logging errors only when the search bar is in the wacky position as such:
unfortunately, I'm still not quite sure what to make of it.
I'll also include my appbar component which uses #material-ui/core/styles' makeStyles CSS rendering. If you want the entire repository to play around with I can make it available as well.
import React from 'react';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import { fade } from '#material-ui/core/styles/colorManipulator';
import { makeStyles } from '#material-ui/core/styles';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import {connectSearchBox} from 'react-instantsearch-dom';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
width: theme.spacing(7),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 300,
'&:focus': {
width: 400,
},
},
}
}));
function SearchBox({currentRefinement, refine}){
const classes = useStyles();
return(
<InputBase
type="search"
value={currentRefinement}
onChange={event => refine(event.currentTarget.value)}
placeholder="Search by state, park name, keywords..."
classes = {{
root: classes.inputRoot,
input: classes.inputInput,
}}
/>
)
}
const CustomSearchBox = connectSearchBox(SearchBox);
function SearchAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static" color="primary">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="Open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Title
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<CustomSearchBox/>
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default SearchAppBar;
I have a react app and I am trying to use material-ui 1.0, with it's JSS solutions. It does not seem to respond to any alignment of justify properties. The code below I would expect to center justify, but it isn't happening. I have placed the code in every configuration I can think of but it is not working.
I feel like maybe something is misnamed but matrial-ui doesn't document it's jss solutions very well and this is my first time using this system to style an app.
// react
import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
// vendor
import Grid from 'material-ui/Grid';
// source
import LoginPage from 'components/pages/auth-page';
import BasePage from 'components/pages/base';
const styles = theme => ({
root: {
display: "flex",
height: "100%",
[theme.breakpoints.down('sm')]: {
width: "100%",
},
[theme.breakpoints.up('md')]: {
width: "80%",
},
[theme.breakpoints.up('lg')]: {
width: "70%",
},
},
river: {
display: "flex",
marginTop: "75px",
flexGrow: 1,
justifyContent: "center",
alignItems: "center",
},
});
class Application extends Component {
constructor(props){
super(props);
}
render(){
const { classes } = this.props;
return(
<div id={"root"} className={classes.root}>
<Grid container className={classes.river}>
{this.state.authorized
? <BasePage />
: <LoginPage />
}
</Grid>
</div>
)
}
}
export default withStyles(styles)(Application);
You can try alignitem and justify provided by Grid it self:
try:
<div id={"root"} className={classes.root}>
<div className={classes.river}
<Grid
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={3}>
<LoginPage />
</Grid>
</Grid>
</div>
</div>
please find that I have used xs={3} as responsive width for the login page. feel free to change those values.
hope this will help you
I am trying to scroll a view over another view in React Native.
render() {
return (
<View style={{
flex: 1
}}>
//THIS IS A BACKGROUND VIEW
<BackgroundView />
//THIS IS THE FOREGROUND VIEW
<View style={{
borderWidth: 1,
}}>
<FlatList
data={cards}
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
renderItem={({ item, index }) => <Card {...item} />}
keyExtractor={(item, index) => index}
onEndReached={this.loadMore}
onEndReachedThreshold={2} />
</View>
</View>
)
}
I want the foreground view, which contains the FlatList to scroll over the BackgroundView
I have tried using position:absolute on the ForegroundView but the FlatList stopped working and I could not scroll.
EDIT : Initially the BackgroundView is shown (contains some intro content), with the ForegroundView on the bottom partially, and as the user scrolls on the screen, The ForegroundView is scrolled over it
This is working:
For your background view use the style '...StyleSheet.absoluteFillObject', or:
{ position: ('absolute': 'absolute'),
left: 0,
right: 0,
top: 0,
bottom: 0,
}
As noted in the comment depending of your design, the foreground will often fill the entire View, making the background impossible to interact with.
The only solution I have found is making the foreground positionned absolute and cover the minimal surface as possible. It works if the view is kept simple.
Example here for a button container on the bottom of the screen, that does not overlaps top, left and right of the Background:
bottomButtonContainer: {
position: 'absolute',
flex: 1,
alignItems: 'center',
bottom: 0,
marginVertical: 5,
marginHorizontal: '25%',
width: '50%',
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'center',
},