imalfect
RReactiflux
•Created by imalfect on 1/18/2023 in #react-forum
Grid elements are not centered
Hello, my grid elements aren't centered, why is that so?
InfoBox:
Thanks for the help.
return (
<Container
sx={{mt: 2, mb: 2}}>
<Grid
justifyContent="center"
alignItems="center"
container
spacing={2}
columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
sx={{width: 1}}>
<Grid item xs={1} md={1.5} align="center">
<InfoBox title="Block Count" value="1231212"/>
</Grid>
<Grid item xs={1} md={1.5} lg={2} align="center">
<InfoBox title="Header Count" value="123231121"/>
</Grid>
<Grid item xs={1} align="center">
<InfoBox title="Peers" value="123"/>
</Grid>
<Grid item xs={1} md={2} align="center">
<InfoBox title="DAA Score" value="1237867112"/>
</Grid>
</Grid>
</Container>
);
return (
<Container
sx={{mt: 2, mb: 2}}>
<Grid
justifyContent="center"
alignItems="center"
container
spacing={2}
columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
sx={{width: 1}}>
<Grid item xs={1} md={1.5} align="center">
<InfoBox title="Block Count" value="1231212"/>
</Grid>
<Grid item xs={1} md={1.5} lg={2} align="center">
<InfoBox title="Header Count" value="123231121"/>
</Grid>
<Grid item xs={1} align="center">
<InfoBox title="Peers" value="123"/>
</Grid>
<Grid item xs={1} md={2} align="center">
<InfoBox title="DAA Score" value="1237867112"/>
</Grid>
</Grid>
</Container>
);
return (
<Box
sx={{
'display': 'flex',
'backgroundColor': 'background.paper',
'boxShadow': 3,
'overflow': 'hidden',
'height': 120,
'borderRadius': 1.5,
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.9, 0.87, 0.86],
},
}}
>
<Typography align="left" variant="h5"
sx={{
marginLeft: 2, marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
{props.title}
</Typography>
<Typography align="right" variant="h3" color='#007aff'
sx={{
marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontWeight: 600, fontSize: 33}}>
{props.value}
</Typography>
</Box>
);
return (
<Box
sx={{
'display': 'flex',
'backgroundColor': 'background.paper',
'boxShadow': 3,
'overflow': 'hidden',
'height': 120,
'borderRadius': 1.5,
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.9, 0.87, 0.86],
},
}}
>
<Typography align="left" variant="h5"
sx={{
marginLeft: 2, marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
{props.title}
</Typography>
<Typography align="right" variant="h3" color='#007aff'
sx={{
marginTop: 1, marginRight: 1.3,
flexGrow: 1,
fontWeight: 600, fontSize: 33}}>
{props.value}
</Typography>
</Box>
);
2 replies
RReactiflux
•Created by imalfect on 12/30/2022 in #react-forum
Box Element causing overflows on smaller screens, even though it does not reach the end of screen
I am using Material UI with React and Webpack
On smaller screens my react box component makes the screen "expand" on the right side, and this causes the navbar to expand, and also horizontal scroll to appear, I have attached my return code, and also a few screenshots that may help.
My element
Some screenshots of the issue:
https://i.stack.imgur.com/gtmJE.png
As you see on the "right side" of the view, the different grey colour appears, and that is the place where the element overflows.
You can view the issue here: https://dev.vinu.cash/nameLookup (visible on mobile devices, on chrome selecting Galaxy S8+ (360x740) device to view on also shows the issue.
return (
<div>
{/* Name "input" panel */}
<Container>
<Box
sx={{
maxWidth: { xs: 350, sm: 480, md: 600, lg: 800},
borderWidth: 15,
borderStyle: 'solid',
borderColor: 'background.paper',
borderRadius: 4,
boxShadow: 8,
backgroundColor: 'background.paper',
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.98, 0.93, 0.9],
},
}}
>
<Typography variant="h4" sx={{fontWeight: 700}}>Enter the name you'd like to look up 📝</Typography>
<FormControl sx={{ m: 2, width: '26ch' }} variant="outlined">
<OutlinedInput id="filled-basic" type="text" label="VinuPay Name" variant="filled" sx={{paddingBottom: 2}} error={!isValid} onChange={(event) => {checkNameValidity(event.target.value)}} endAdornment={<InputAdornment position="end">.vinu</InputAdornment>}/>
<InputLabel htmlFor="filled-adornment-amount">VinuPay Name</InputLabel>
<Typography variant="h6" display={reasonId === undefined ? "none" : "block"} color={isValid ? "#1eff18" : "#ff0000"}>{isValid ? "Looking good!" : reason}</Typography>
</FormControl>
<br/>
<LoadingButton
onClick={() => {lookupName()}}
endIcon={<SearchRoundedIcon />}
loading={shouldLoad}
loadingPosition="end"
variant="contained"
color="secondary" sx={{minHeight: 50, minWidth: 120}}
disabled={!isValid || name === ''}
>
Look up
</LoadingButton>
<Typography variant="h3" sx={{fontWeight: 800, paddingTop : 5}}>Vinu<Typography display="inline" variant="h3" sx={{fontWeight: 800, color: '#006aff'}}>Pay 🎉</Typography></Typography>
<Typography variant="h5" sx={{fontWeight: 700, mt: 5}} color="error">NOTICE: The displaying of the result of the lookup will most likely be changed in future versions. Happy to hear your feedback :) </Typography>
</Box>
</Container>
{/* Name "output" panel */}
<Container sx={{paddingTop: 3}}>
{nameData !== null? <NamePanel name={nameData.name} nameId={nameData.nameId} owner={nameData.ownerAddress} isVerified={name.isTrusted} canManage={false} style={{paddingTop: 5}}/> : ''}
</Container>
</div>
)
return (
<div>
{/* Name "input" panel */}
<Container>
<Box
sx={{
maxWidth: { xs: 350, sm: 480, md: 600, lg: 800},
borderWidth: 15,
borderStyle: 'solid',
borderColor: 'background.paper',
borderRadius: 4,
boxShadow: 8,
backgroundColor: 'background.paper',
'&:hover': {
backgroundColor: 'background.paper',
opacity: [0.98, 0.93, 0.9],
},
}}
>
<Typography variant="h4" sx={{fontWeight: 700}}>Enter the name you'd like to look up 📝</Typography>
<FormControl sx={{ m: 2, width: '26ch' }} variant="outlined">
<OutlinedInput id="filled-basic" type="text" label="VinuPay Name" variant="filled" sx={{paddingBottom: 2}} error={!isValid} onChange={(event) => {checkNameValidity(event.target.value)}} endAdornment={<InputAdornment position="end">.vinu</InputAdornment>}/>
<InputLabel htmlFor="filled-adornment-amount">VinuPay Name</InputLabel>
<Typography variant="h6" display={reasonId === undefined ? "none" : "block"} color={isValid ? "#1eff18" : "#ff0000"}>{isValid ? "Looking good!" : reason}</Typography>
</FormControl>
<br/>
<LoadingButton
onClick={() => {lookupName()}}
endIcon={<SearchRoundedIcon />}
loading={shouldLoad}
loadingPosition="end"
variant="contained"
color="secondary" sx={{minHeight: 50, minWidth: 120}}
disabled={!isValid || name === ''}
>
Look up
</LoadingButton>
<Typography variant="h3" sx={{fontWeight: 800, paddingTop : 5}}>Vinu<Typography display="inline" variant="h3" sx={{fontWeight: 800, color: '#006aff'}}>Pay 🎉</Typography></Typography>
<Typography variant="h5" sx={{fontWeight: 700, mt: 5}} color="error">NOTICE: The displaying of the result of the lookup will most likely be changed in future versions. Happy to hear your feedback :) </Typography>
</Box>
</Container>
{/* Name "output" panel */}
<Container sx={{paddingTop: 3}}>
{nameData !== null? <NamePanel name={nameData.name} nameId={nameData.nameId} owner={nameData.ownerAddress} isVerified={name.isTrusted} canManage={false} style={{paddingTop: 5}}/> : ''}
</Container>
</div>
)
25 replies