I am struggling to align a button and a <Typography> component on the same line:
Here is what I have so far:
<Grid item lg={12} md={12} sm={12} xs={12} className={classes.register}>
<Typography noWrap className={classes.typoText} variant="subtitle2">
text1
</Typography>
<ButtonBase className={classes.labelForgot} disableFocusRipple="false" disableRipple="false" centerRipple="false">
<Typography noWrap className={classes.labelForgot} variant="subtitle2">
text2
</Typography>
</ButtonBase>
</Grid>
My styles:
labelForgot: {
color: 'rgba(20, 176, 12,0.9)',
backgroundColor: 'transparent',
paddingLeft: 2,
'&:hover': {
color: 'rgb(57, 232, 48)',
backgroundColor: 'transparent',
}
},
root: {
backgroundSize: 'cover',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
minHeight: '100vh',
justifyContent:'center',
overflow: 'hidden',
},
gridMain: {
margin: '0 auto',
maxWidth: 300,
},
Basically I have a <div> that allows a height of ยด100%`.
For the container I use css grid main.
Here is the result
how to align horizontal icon and text in material ui
Check this page. I was stuck on the same problem... The suggested solution is wrapping the items with a div...
<div style={{
display: 'flex',
alignItems: 'center'
}}>
<Typography noWrap className={classes.typoText} variant="subtitle2">
text1
</Typography>
<ButtonBase className={classes.labelForgot} disableFocusRipple="false"
disableRipple="false" centerRipple="false">
<Typography noWrap className={classes.labelForgot} variant="subtitle2">
text2
</Typography>
</ButtonBase>
</div>
I tried to do it with Grids as well from Material UI but was having trouble with a header and buttons
Related
I am using the MUI V5 in a react project and I am trying to center the logo in an AppBar on extra small screens but no mattter what I do nothing seems to be working. The Typography comonent is wrapped inside a ToolBar wrapped inside an AppBar that only appears on xs screens.
Here's my current code.
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: 'flex', sm: 'none' },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: 'gray',
}}
>
<Toolbar >
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
flexGrow: 1,
bgcolor: 'red',
display: { xs: 'flex', sm: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
LOGO
</Typography>
</Toolbar>
</AppBar>
I have throw everything I can at it but nothing seems to work. Any help is highly appreaciated.
Best Way to handle spacing with MUI is using Grid component.
Your code would be like this:
return (
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: "flex", sm: "none" },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: "gray",
}}
>
<Toolbar>
<Grid
container
spacing={1}
sx={{ alignItems: "center", justifyContent: "space-between" }}
>
<Grid item xs={4} sx={{ textAlign: "start" }}>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
// onClick={handleDrawerToggle}
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
</Grid>
<Grid item xs sx={{ textAlign: "center" }}>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
bgcolor: "red",
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
LOGO
</Typography>
</Grid>
<Grid item xs={4}></Grid>
</Grid>
</Toolbar>
</AppBar>
</Box>
);
MUI Grid docs
Not a big expert in MUI, but try defining the flex direction, then define the align items or justify content to be centre depending on the direction.
I have an app bar and a mini side drawer variant with code near identical to that which is given as example on material-ui. I am having trouble aligning a box with some info about the logged in user to the end of the app bar. Right now I am using grid containers, but these cause breaking bugs as screen size decreases. How can I force this box to the end of the toolbar while keeping any other content in the tool bar aligned to the start?
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<Grid container>
<a href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
here to go to production.
</Typography>
</Grid>
<Grid container justifyContent="flex-end">
<Box
style={{
display: "flex",
alignItems: "center",
backgroundColor: "#0672cb",
height: "64px",
padding: "10px 24px 10px 24px",
}}
>
<i class="icon_class" style={{ fontSize: "24px", color: "#fff", marginRight: "10px" }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography
style={{
color: "#FFF",
fontWeight: 400,
fontSize: 14,
}}
>
{loggedUser}
</Typography>
<Typography
style={{
color: "#FFF",
fontWeight: 400,
fontSize: 14,
}}
>
{userRole}
</Typography>
<Typography
style={{
color: "#FFF",
fontWeight: 400,
fontSize: 14,
}}
>
{userExperience}
</Typography>
</Box>
</Box>
</Grid>
</Toolbar>
</AppBar>
I'm trying to implement the above table design using material UI (mui).
I'm implementing this by using tables. this is so far I've built. I tried very hard to space between them but doesn't work. please help!
And here is what I've built
Now here is my code for this
const StyledTableCell = styled(TableCell)(({ theme }) => ({
padding: 0,
border: `1px solid ${theme.palette.divider}`,
background: '#2C8EFF',
height: '100px',
}));
{columns.map((col, index) => {
return (
<StyledTableCell key={index}>
<Grid
container
sx={{
textAlign: 'center',
justifyContent: 'space-between',
width: '70px',
border: 1,
height: '100%',
}}
>
<Grid item sm={12} sx={{ bgcolor: '#FDC841' }}>
{col.upperValue}
</Grid>
<Grid
item
sm={12}
sx={{
writingMode: 'vertical-lr',
p: 2,
// height: '100%',
textAlign: 'center',
color: 'white',
}}
>
{col.label}
</Grid>
<Grid item sm={12} sx={{ bgcolor: '#FB9D67' }}>
{col.lowerValue}%
</Grid>
</Grid>
</StyledTableCell>
);
})}
How can I center the grid container while also ensuring the bottom grid items float to the left?
Bottom of Grid
<Grid container spacing={0}
alignItems="center"
justifyContent="center" >
{items.map((product, idx) => {
return <Grid item xs={3} key={idx} style={{
border: 'solid',
padding: '10px',
marginRight: '5px',
marginLeft: '5px',
marginTop: '10px',
marginBottom: '10px',
}}>
I need to align the title Hello John Joseph Jones horizontally on the top BUT inside the black box.
The problem that it consumes the space vertically.
I don't if my code is good. Feel free to revise if there is a better way to do this.
Codesandbox is here CLICK HERE
<Box m={3}>
<Grid
container
direction="column"
className={classes.container}
spacing={2}
>
{/* <h1>Hello John Joseph Jones</h1> */}
<Grid item xs={6} className={classes.pictureSection}>
<div className={classes.imageSection}>
<img
src="https://picsum.photos/id/237/200/300"
className={classes.img}
alt="no pic"
/>{" "}
<p className={classes.precinctNo}>PR 4838390</p>
<p className={classes.controlNo}>555555</p>
</div>
</Grid>
<Grid item xs={6} className={classes.nameAddressSection}>
<Box className={classes.fontText}>John Joseph Jones</Box>
<Box mt={1} className={classes.fontText}>
26 South Hawthorne Drive Tonawanda, NY 14150
</Box>
<Box mt={1}>
<QRCode size={80} value={"4234432"} />
</Box>
</Grid>
</Grid>
</Box>
I have edited your Code:
Inserted the new h1 tag, styled it, and changed the Grid direction from column to row.
import React from "react";
import { makeStyles } from "#material-ui/styles";
import { Box } from "#material-ui/core";
import Grid from "#material-ui/core/Grid";
import QRCode from "react-qr-code";
import { red } from "#material-ui/core/colors";
const useStyles = makeStyles(() => ({
button: {
color: "white"
},
hideButton: {
visibility: "hidden"
},
imageSection: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
height: "100%"
},
img: {
height: "4cm",
width: "4cm",
},
h1: { // new
fontSize: "0.70rem",
width: "100%",
textAlign: "center",
margin: "0.1rem"
},
precinctNo: {
display: "flex",
justifyContent: "center",
margin: "0",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase",
color: "#000"
},
controlNo: {
display: "flex",
justifyContent: "flex-start",
margin: "0",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase",
color: "#000"
},
boxBorder: {
border: "3px solid black"
},
container: {
width: "8.5cm",
height: "5.5cm",
borderRadius: "3px",
border: "3px solid #000000",
color: "#00000"
},
pictureSection: {
display: "flex",
flexBasis: "100%"
},
nameAddressSection: {
display: "flex",
flexDirection: "column",
textAlign: "center",
flexBasis: "100%",
justifyContent: "space-between"
},
alignItems: {
alignSelf: "center",
textAlign: "center"
},
fontText: {
color: "#000000",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase"
}
}));
const SampleCard = () => {
const classes = useStyles();
return (
<Box m={3}>
<Grid
container
direction="row" // new
className={classes.container}
spacing={2}
>
<h1 className={classes.h1}>Hello John Joseph Jones</h1> // new
<Grid item xs={6} className={classes.pictureSection}>
<div className={classes.imageSection}>
<img
src="https://picsum.photos/id/237/200/300"
className={classes.img}
alt="no pic"
/>{" "}
<p className={classes.precinctNo}>PR 4838390</p>
<p className={classes.controlNo}>555555</p>
</div>
</Grid>
<Grid item xs={6} className={classes.nameAddressSection}>
<Box className={classes.fontText}>John Joseph Jones</Box>
<Box mt={1} className={classes.fontText}>
26 South Hawthorne Drive Tonawanda, NY 14150
</Box>
<Box mt={1}>
<QRCode size={80} value={"4234432"} />
</Box>
</Grid>
</Grid>
</Box>
);
};
export default SampleCard;
Watch out for the comments in your return statement. (I don't know if they will break your application)
You can do that by changing the structure a little
Add a root class to hold the main box
root: {
width: "8.5cm",
height: "5.5cm",
border: "3px solid #000000",
borderRadius: "3px",
boxSizing: "border-box"
},
Remove the border from the container class
container: {
color: "#00000",
height: "100%"
},
Apply it to the parent element
<Box className={classes.root} m={3}>
Add the centered text
<Box mb={1} className={classes.fontText} align="center">
Hello John Joseph Jones
</Box>
Take a look at https://codesandbox.io/s/material-ui-forked-dvoun?file=/SampleCard.js:197-252
In the example above I add some padding to the parent element, as now it holds the border, there may be other ways of doing that to keep the style
To keep the fixed size you will need to play around with the elements