I am trying to make it so that by sidebar is overfills with a scroll bar when the screen is shrunk:
<RootStyle>
<Authenticator />
<DashboardNavbar onOpenSidebar={() => setOpen(false)} disabled />
<BodyStyle>
<ConsoleSettings
navConfig={settingsConfig}
sx={{
overflow: 'auto',
width: DRAWER_WIDTH,
}}
/>
<MainStyle>
<Outlet />
</MainStyle>
</BodyStyle>
</RootStyle>
const RootStyle = styled('div')({
display: 'flex',
justifyContent: 'center',
minHeight: '100%',
overflow: 'auto',
});
const BodyStyle = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
width: '70%',
minWidth: 1000,
minHeight: '100%',
paddingTop: APP_BAR_MOBILE + 24,
paddingBottom: theme.spacing(10),
overflow: 'auto',
[theme.breakpoints.up('lg')]: {
paddingTop: APP_BAR_DESKTOP + 24,
paddingLeft: theme.spacing(10),
paddingRight: theme.spacing(10),
}
}));
const MainStyle = styled('div')(({ theme }) => ({
display: 'flex',
flexGrow: 1,
overflow: 'auto',
float: 'right',
minHeight: '100%',
paddingBottom: theme.spacing(10),
[theme.breakpoints.up('lg')]: {
paddingLeft: theme.spacing(4)
}
}));
If the screen is large, it looks fine:
But if I shrink the screen, the sidebar gets cut off with no scroll bar:
I was under the impression that adding overflow: auto would fix the issue, but it doesn't seem to work in this case. Would someone be able to explain why?
Related
i am having a problem getting the styling right on a couple of buttons in JS, it seems when i add a styling class via className that on first render the formatting works, but on subsequent refreshes it loses its styling. It is only happening on the two individual buttons i have. After troubleshooting for ages, i have found that everything works when i use SX instead of classNames, so if i do this then the refresh works. So in code below one button styles and remains styles, but the second one, refreshing my button class does not? Stumped at this point, i ran through forums and see a lot about NextJs needing some extra config in _document and _app to make it work, but i ran this in from the NextJs Material UI boiler plate from Git so dont think it could be that causing it.
Code:
import React from 'react'
import { AppBar, Toolbar, alpha } from "#mui/material";
import Button from '#mui/material/Button'
import ButtonBase from '#mui/material/ButtonBase';
import { styled } from '#mui/material/styles';
import Typography from '#mui/material/Typography';
import InputBase from '#mui/material/InputBase';
import SearchIcon from '#mui/icons-material/Search';
import AddIcon from '#mui/icons-material/Add';
import { makeStyles } from '#mui/styles'
const useStyles = makeStyles(theme => ({
button: {
...theme.typography.mainmenu,
borderRadius: "40px",
width: "230px",
height: "130px",
marginLeft: "30px",
alignItem: "center",
"&:hover": {
backgroundColor: theme.palette.secondary
},
[theme.breakpoints.down("sm")]: {
width: '100% !important', // Overrides inline-style
height: 100
},
},
}))
/*Image Button Styling Begins*/
const images = [
{
url: '/assets/breakfastMenu.jpg',
title: 'Breakfast',
width: '20%',
},
{
url: '/assets/steak.jpg',
title: 'Mains',
width: '20%',
},
{
url: '/assets/desserts.jpg',
title: 'Desserts',
width: '20%',
},
];
const Image = styled('span')(({ theme }) => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
color: theme.palette.common.primary,
}));
const ImageButton = styled(ButtonBase)(({ theme }) => ({
position: 'relative',
height: 150,
[theme.breakpoints.down('sm')]: {
width: '100% !important', // Overrides inline-style
height: 100,
},
'&:hover, &.Mui-focusVisible': {
zIndex: 1,
'& .MuiImageBackdrop-root': {
opacity: 0.15,
},
'& .MuiImageMarked-root': {
opacity: 0,
},
'& .MuiTypography-root': {
border: '4px solid currentColor',
},
},
}));
const ImageSrc = styled('span')({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: 'cover',
backgroundPosition: 'center 40%',
});
const ImageBackdrop = styled('span')(({ theme }) => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0.4,
transition: theme.transitions.create('opacity'),
}));
const ImageMarked = styled('span')(({ theme }) => ({
height: 3,
width: 18,
backgroundColor: theme.palette.common.white,
position: 'absolute',
bottom: -2,
left: 'calc(50% - 9px)',
transition: theme.transitions.create('opacity'),
}));
/*Image Button Styling Ends*/
const Search = styled('div')(({ theme }) => ({
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
}));
const SearchIconWrapper = styled('div')(({ theme }) => ({
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: 'inherit',
'& .MuiInputBase-input': {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {
width: '20ch',
},
},
},
}));
const Header = () => {
const classes = useStyles();
return (<React.Fragment>
<AppBar position="sticky" className={classes.appBar}>
<Toolbar disableGutters>
{images.map((image) => (
<ImageButton
focusRipple
key={image.title}
style={{
width: image.width,
}}
>
<ImageSrc style={{
backgroundImage: `url(${image.url})`
}} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
<Typography
component="span"
variant="subtitle1"
color="white"
fontWeight="bold"
sx={{
position: 'relative',
p: "7em",
pt: "2em",
pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
}}
>
{image.title}
<ImageMarked className="MuiImageMarked-root" />
</Typography>
</Image>
</ImageButton>
))}
<Button size="large" variant="contained" color="secondary"
startIcon={<AddIcon />}
sx={{
borderRadius: "40px", borderRadius: "40px",
width: "230px",
height: "130px",
marginLeft: "30px",
alignItem: "center",
}} >Add A recipe</Button>
<Button size="large" variant="contained" color="secondary" className={classes.button}>Meals for the Week</Button>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Search…"
inputProps={{ 'aria-label': 'search' }}
/>
</Search>
</Toolbar>
</AppBar>
</React.Fragment >
)
}
export default Header
Exactly, you need to add some configuration to the _document.tsx in order to make the styles work properly with the NextJS server side rendering feature. The reason behind this is that you need that some styles are injected in the DOM for you.
As you can see in the MUI docs, you can use the ServerStyleSheets to handle the server side rendering properly.
This is the code I have in my _document.tsx
import React from 'react';
import Document, { Html, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '#mui/styles';
export default class MyDocument extends Document {
render() {
return (
<Html>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
};
};
You can read more information about this in these Server rendering - MUI docs
I'm using Material UI Accordion for creating a filter menu.
It looks like this on some devices whereas it looks likes this on other devices with different dimensions even though the margins between the items are the same and uses the same code. On resizing the dimensions of the screen, the inconsistency changes.
How to fix this inconsistency with the spacing between each filter item?
Here's my file FilterAccordion.tsx:
<Box className={classes.accordionRoot}>
<Accordion style={{ boxShadow: "none" }} defaultExpanded={true}>
<AccordionSummary
expandIcon={<ExpandMore style={{ fill: "#d3d3d3" }} />}>
<div className={classes.verticalrootcontainer}>
<Icon
onClick={(e) => e.stopPropagation()}
style={{
fill: "#d3d3d3",
width: "2rem",
marginRight: "1rem",
transform: "scale(3)",
zIndex: -1,
}}
/>
<Typography
variant="body1"
className={`titleAquire ${classes.title}`}>
{title}
</Typography>
</div>
</AccordionSummary>
<AccordionDetails>
<div className={classes.listRoot}>
{Object.keys(groupByPacks).map((item, index) => {
let checked = isChecked(item);
return (
<div
key={index}
className={`${classes.list} ${
checked ? classes.selected : ""
}`}
onClick={() => handleOnCheck(item)}>
<Typography variant="body1" className={classes.item}>
{item}
</Typography>
<Typography variant="body1" className={classes.item}>
{groupByFilteredPacks[item]
? groupByFilteredPacks[item]?.length
: 0}
</Typography>
</div>
);
})}
</div>
</AccordionDetails>
</Accordion>
</Box>
And the CSS file:
accordionRoot: {
"& .MuiAccordion-root": {
background: "transparent",
},
"& .MuiAccordionDetails-root": {
padding: "0px",
},
"& .MuiAccordionSummary-root": {
padding: "0px",
marginBottom: "-1rem",
},
"& .MuiCollapse-entered": {
marginTop: "1rem",
},
},
title: {
fontSize: "18px",
color: theme.on.dark,
},
verticalrootcontainer: {
display: "flex",
alignItems: "center",
},
list: {
display: "flex",
width: "100%",
alignItems: "center",
justifyContent: "space-between",
marginTop: "0.2rem",
padding: "0.2rem 0.5rem",
cursor: "pointer",
"&:first-child": {
marginTop: 0,
},
},
item: {
textTransform: "uppercase",
color: theme.on.dark,
opacity: "30%",
},
selected: {
background: theme.on.dark,
"& p": {
color: theme.darkMode.light,
opacity: "100%",
},
},
listRoot: {
width: "100%",
},
I have a parent view which width is "100%" (not screen width), and I want to have each children with the same width and height.
My codes is:
<View style={styles.container}>
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
</View>
const styles = StyleSheet.create({
container: {
width: "100%",
flexDirection: "row",
alignItems: "center",
},
item: {
width: 75,
height: 75,
marginRight: 10,
backgroundColor: "red",
},
});
But this is not responsive for all devices (in small sevices some of the children go out of screen)... Is there any other way to do that?
Thank you.
container: {
flexDirection: "row",
alignItems: "center",
},
item: {
flex: 1,
aspectRatio: 1,
backgroundColor: "red",
},
The trick for your situation is aspectRatio. Just make each child flex: 1, but with an aspect ratio of 1 to make them squared.
Percentage widths
There are likely many ways to do this, but the first one that comes to mind is setting the widths to percentages. This makes the item a percentage of the parent.
item: {
width: '30%',
height: 75,
marginRight: 10,
backgroundColor: "red",
}
If you need something more flexible, you may want to look into responsive design and setting breakpoints for different screen sizes.
Flex Wrap
If you want your content to stay a fixed size, you can have it wrap within your container. For different screen sizes, there may be more boxes in one row than another.
You'll likely need to change some styling, but wrapping would look something like this
<View style={styles.container}>
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
</View>
const styles = StyleSheet.create({
container: {
width: "100%",
justifyContent: 'space-between',
flexDirection: "row",
alignItems: "center",
flexWrap: 'wrap',
},
item: {
width: 75,
height: 75,
marginRight: 10,
backgroundColor: "red",
},
});
Grid
If you don't like a variable number of boxes per row, you could make a grid. You would have a container, rows, and, in each row, your boxes.
Again, you'll have to tweak some styles.
<Container style={styles.container}>
<Row style={styles.row}>
<Box />
<Box />
<Row />
<Row style={styles.row}>
<Box />
<Box />
<Row />
</Container>
const styles = StyleSheet.create({
container: {
width: "100%",
},
row: {
width: "100%",
justifyContent: 'space-between',
flexDirection: "row",
alignItems: "center",
},
item: {
width: 75,
height: 75,
marginRight: 10,
backgroundColor: "red",
},
});
I am creating a simple car booking app where I have implemented react native MapView in a container and above I have also given 2 TextInputs where user can input the Pickup location and the drop off location.
Screenshot of MapView and TextInputs
If a user inputs the pickup location and a drop-off location I want TextInputs to show some suggestions in a ListView about the location which user inputs and when both inputs are given I want the below map to change with 2 markets from pickup to drop off location.
SearchScreen.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import MapView from 'react-native-maps';
const LATITUDE = 24.860735;
const LONGITUDE = 67.001137;
const LATITUDE_DELTA = 1;
const LONGITUDE_DELTA = 1;
export default class SearchRoutes extends React.Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
}
}
static navigationOptions = {
headerTitle: 'Search Routes',
headerTintColor: '#fff',
headerRight: (<TouchableOpacity />),
headerTitleStyle: {
flex: 1,
padding: 0,
color: '#fff',
alignItems: 'center',
textAlign: 'center',
fontWeight: 'normal',
},
headerStyle: {
backgroundColor: '#b5259e',
},
}
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer} >
<View style={{ flexDirection: 'row' }}>
<EntypoIcon name="dots-three-vertical" size={30} color='#fff' style={{ paddingTop: 12 }} />
<TextInput style={styles.pickUpInput} underlineColorAndroid="transparent" placeholder='Enter Your pickup location' />
</View>
<View style={{ flexDirection: 'row' }}>
<EntypoIcon name="dots-three-vertical" size={30} color='#fff' style={{ paddingTop: 12 }} />
<TextInput style={styles.pickUpInput} underlineColorAndroid="transparent" placeholder='Enter Your dropoff location' />
</View>
</View>
<View>
<MapView
style={styles.maps}
showsUserLocation={true}
region={this.state.region}>
<MapView.Marker coordinate={this.state.region} />
</MapView>
</View>
<View style={styles.footer} />
<TouchableOpacity style={styles.btnFooter} onPress={() => { this.props.navigation.navigate('RoutesStack') }}>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }}>
<Icon style={styles.iconFooter} name="search" />
<Text style={styles.footerText}>SEARCH</Text>
</View>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
inputContainer: {
height: 130,
flexDirection: 'column',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#b5259e',
},
pickUpInput: {
padding: 8,
width: '80%',
margin: 4,
backgroundColor: '#d27cc4',
borderRadius: 4,
},
maps: {
width: '100%',
height: '100%',
},
footer: {
flex: 3,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
btnFooter: {
backgroundColor: '#b5259e',
padding: 15,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
footerText: {
fontSize: 14,
fontWeight: 'normal',
color: 'white',
},
iconFooter: {
display: 'flex',
fontSize: 20,
marginRight: 10,
color: 'white',
alignItems: 'center',
justifyContent: "center",
},
});
Can anyone please help me with that, I am stuck with this from last couple of days I have also tried doing like this ( https://github.com/FaridSafi/react-native-google-places-autocomplete ) but failed. Thanks.
I have a drop down menu button that sits in a span:
Don't mind that it's not horizontally centered (that's just a poor screen shot). What I want to do is vertically center it, but not by using position. Instead I would like to shift it down by a pixel or two. How can I do this?
Here's my styling:
<span
className={ 'arrow-down' }
style={{
float: 'right',
display: 'block',
height: '12px',
lineHeight: '12px',
width: '12px',
borderRadius: '30px',
backgroundColor: '#ffbf44',
color: 'black',
textAlign: 'top',
fontSize: '1.25em',
}}/>
You can use margin-top:
<span
className={ 'arrow-down' }
style={{
float: 'right',
display: 'block',
height: '12px',
lineHeight: '12px',
width: '12px',
borderRadius: '30px',
backgroundColor: '#ffbf44',
color: 'black',
textAlign: 'top',
fontSize: '1.25em',
marginTop: '2px'
}}/>
This is effectively what #AllanJiang proposed with paddingTop, but margin won't affect the clickable size of the element, if that's an issue.
You can try use flex box positioning:
spanStyle: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 2, <--- in case you want to adjust the position manually
}