I have a form with code:
<Box display="flex" flexDirection="column" alignItems="center" mt={2}>
<Grid container spacing={1}>
{playlists.map((playlist) => (
<Grid item lg={4} md={6} sm={6} xs={12} key={playlist?.id}>
<FormControlLabel
control={<Checkbox checked={true} />}
label={playlist?.name}
/>
</Grid>
))}
</Grid>
<TextField
name="comment"
label="Comment"
multiline
sx={{ width: isLarge ? "80%" : "45%" }}
margin="normal"
color="secondary"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AddCommentIcon />
</InputAdornment>
),
}}
/>
<Button
variant="contained"
disableElevation
color="secondary"
startIcon={<VideoCallIcon />}
sx={{ mt: 2, width: isLarge ? "80%" : "45%" }}
>
Upload Video
</Button>
</Box>
Which renders like this:
I would like to make the margin of the left side of the left column equal to the margin on the right side of the right column so that the checkboxes are centered on the page.
I am able to accomplish this by setting the Grid item to have the align="center" prop although this disrupts the vertical alignment of the checkboxes – here is a picture for reference:
I would like the form to look like this (I brute forced the code with CSS although now the form does not work dynamically based on the user’s screensize – this is only a reference of my desired result.
How can I adjust my container to achieve this?
{playlists.map((playlist) => (
control={}
label={playlist?.name}
style={{ margin: ‘auto’ }} // Centers the checkbox within the grid cell
/>
))}
{/* …rest of your code */}
Certainly! To adjust your container for the form and achieve the desired alignment that is also responsive to the user’s screen size, you can use a combination of CSS styles and properties provided by Material-UI. Here’s an example code that should help:
{playlists.map((playlist) => (
control={}
label={playlist?.name}
style={{ margin: 'auto' }} // Centers the checkbox within the grid cell
/>
))}
{/* ...rest of your code */}
In this example:
-
justifyContent="center"in theGridcontainer centers the elements horizontally. -
Each
Griditem uses aflexstyle withjustifyContent: 'center'to center the checkboxes horizontally. -
The
margin: 'auto'property onFormControlLabelcenters the checkbox both vertically and horizontally within its container.
This should make your form responsive and maintain the desired alignment across different devices. If you need further adjustments or assistance with other aspects of your project.
Khalid Elle jylaly is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.