I'm using a Material UI list component in my code.
Here is the code snippet:
<List>
<ListItem button>
<ListItemText
disableTypography
primary={<Typography>Hello</Typography>}
/>
<p>John</p>
<DraftsIcon />
</ListItem>
</List>
Here is the screenshot of the result:
How can I set a fixed distance between "Hello" and "John"?
and avoid the following case:
// just add minWidth in button
<List>
<ListItem button>
<ListItemText
style={{minWidth:"50px" }}
disableTypography
primary={<Typography>Hello</Typography>}
/>
<p>John</p>
<DraftsIcon />
</ListItem>
</List>
you can also do something like this:
import React from 'react';
import Box from '#material-ui/core/Box';
import { IconButton, Typography } from '#material-ui/core';
import DraftsIcon from "#material-ui/icons/Drafts";
export default function FlexGrow() {
return (
<Box display="flex" p={1} >
<Box p={1} flexGrow={1} >
<Typography variant="button" display="block" gutterBottom>
Hello
</Typography>
</Box>
<Box p={1} >
<Typography variant="button" display="block" gutterBottom>
John
</Typography>
</Box>
<IconButton color="inherit" style={{marginTop :"-10px"}}>
<DraftsIcon/>
</IconButton>
</Box>
);
}
Related
I am using material UI version 5.4 and I have a sign-in form and applied validations on it. Validation is appearing properly but my problem is when I placed a long texted error message the exclamation mark is coming below outlined text field of the MUI material.
Here is the screenshot:
And here is the code:
<Box
component="form"
role="form"
sx={{
"& .MuiFormHelperText-root": { color: "#d32f2f" },
"& .MuiInputLabel-formControl": { paddingTop: "5px" },
}}
>
<Box mb={2}>
<TextField
type="email"
label="Email"
variant="standard"
fullWidth
onChange={(e) => emailHandler(e)}
error={emailError}
helperText={emailError ? emailErrorMessage : ""}
/>
</Box>
<Box mb={2}>
<TextField
margin="dense"
type="password"
label="Password"
variant="standard"
fullWidth
onChange={(e) => passwordHandler(e)}
error={passwordError}
helperText={passwordError ? passwordErrorMessage : ""}
/>
</Box>
<Box>
<span style={{ color: "#d32f2f", fontSize: "12px" }}>{error}</span>
</Box>
<Typography variant="button" color="info" to="/forgot-password" component={Link}>
Forgot Password?
</Typography>
<Box mt={4} mb={1}>
<Button variant="gradient" color="newColor" fullWidth onClick={signInHandler}>
sign in
</Button>
</Box>
<Box mt={3} mb={1} textAlign="center">
<Typography variant="button" color="text">
Don't have an account?{" "}
<Typography
onClick={() => {
navigate("/sign-up", { replace: true });
}}
style={{ cursor: "pointer" }}
variant="button"
color="info"
fontWeight="medium"
textGradient
>
Sign Up
</Typography>
</Typography>
</Box>
</Box>
How can I solve this styling issue?
I have a dialog popup using Material UI where I cannot get rid of the whitespace above the title. I've applied a background colour to the title and content area, but this then left a white margin at the top, which I can't seem to get rid of.
Any idea on how to do this?
<Dialog
id="myDialog"
classes={{ paper: classes.dialog }}
onClose={handleCloseTagInstructions}
open={openTagInstructions}
aria-labelledby="form-dialog-title"
fullWidth={true}
>
<DialogActions>
<IconButton
className={classes.customizedButton}
onClick={handleCloseTagInstructions}
>
<CloseIcon />
</IconButton>
</DialogActions>
<DialogTitle id="helper-dialog-title" style={{ backgroundColor: '#eeeeee' }}>
<Typography variant="h5">White's Semi-Open Files at</Typography>
</DialogTitle>
<DialogContent style={{ backgroundColor: '#f5f5f5' }} dividers>
<Typography variant="h6">White's Strategy</Typography>
<Typography paragraph="true">Blah</Typography>
<Typography variant="h6">Black's Strategy</Typography>
<Typography paragraph="true">???</Typography>
<Typography variant="h6">Notes</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Typography paragraph="true">Blah.</Typography>
</Grid>
<Grid item xs={6}>
<Paper width="5%" id="board3"></Paper>
</Grid>
</Grid>
</DialogContent>
</Dialog>;
try changing the dialog margin
dialog { margin-top: -10px !important; }
here is an example with your code :
<Dialog
style="margin-top: -10px"
id="myDialog"
classes={{ paper: classes.dialog }}
onClose={handleCloseTagInstructions}
open={openTagInstructions}
aria-labelledby="form-dialog-title"
fullWidth={true}
>
<DialogActions>
<IconButton
className={classes.customizedButton}
onClick={handleCloseTagInstructions}
>
<CloseIcon />
</IconButton>
</DialogActions>
<DialogTitle id="helper-dialog-title" style={{ backgroundColor: '#eeeeee' }}>
<Typography variant="h5">White's Semi-Open Files at</Typography>
</DialogTitle>
<DialogContent style={{ backgroundColor: '#f5f5f5' }} dividers>
<Typography variant="h6">White's Strategy</Typography>
<Typography paragraph="true">Blah</Typography>
<Typography variant="h6">Black's Strategy</Typography>
<Typography paragraph="true">???</Typography>
<Typography variant="h6">Notes</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Typography paragraph="true">Blah.</Typography>
</Grid>
<Grid item xs={6}>
<Paper width="5%" id="board3"></Paper>
</Grid>
</Grid>
</DialogContent>
</Dialog>;
I have four columns in a Grid container, each with the following structure:
<Grid item>
<Typography>Big Title 1</Typography>
<Card className={classes.stretchMe}>
<CardContent>
Content
</CardContent>
</Card>
</Grid>
I would like the Card with class stretchMe to stretch to the bottom of the parent Grid item, but because each Card has a Typography component above it, it stretches beyond the height of the parent div.
How do I get all the Cards to stretch to the bottom of the parent Grid item and no further (i.e. minus the height of the Typography)?
Here is a slightly more complex version of the code:
import React from 'react';
const useStyles = makeStyles(theme => ({
divider: {
borderBottom: `1px solid ${theme.palette.divider}`,
},
stretchMe: {
height: '100%',
},
}));
const Cards= () => {
const classes = useStyles();
return (
<Grid container item xs={12} spacing={3} justify="space-between" alignItems="stretch">
<Grid item xl={2} lg={2} md={6} xs={12} >
<Typography variant="h4" >
Big Title 1
</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 1</Typography>
<Avatar />
</CardContent>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 2</Typography>
<Typography variant="h4">Content</Typography>
</CardContent>
<CardContent className={classes.divider}>
<Grid container>
<Grid item xs={6}>
<Typography variant="h6">Little Title 3</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="h6">Little Title 4</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item xl={4} lg={4} md={6} xs={12} >
<Typography variant="h4" >
Big Title 2
</Typography>
<Card className="classes.stretchMe">
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xl={3} lg={3} md={6} xs={12} >
<Typography variant="h4" >
Big Title 3
</Typography>
<Card className="classes.stretchMe">
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xl={3} lg={3} md={6} xs={12}>
<Typography variant="h4">
Big Title 4
</Typography>
<Card className="classes.stretchMe">
<CardContent className={classes.divider}>
<div className={classes.teamProfile}>
<Avatar/>
</div>
<div className={classes.teamProfile}>
<Avatar/>
</div>
<div className={classes.teamProfile}>
<Avatar/>
</div>
<div className={classes.teamProfile}>
<Avatar/>
</div>
</CardContent>
</Card>
</Grid>
</Grid>
);
};
export default Cards;
Many thanks,
Katie
EDIT
Here is the problem - the Grid items are stretching beyond the Grid containers
And here is the desired output:
My suspicion is that the Big titles are pushing the Cards down?
Pass the prop as a variable using JSX, not as a string. Do:
<Card className={classes.stretchMe}>
Instead of:
<Card className="classes.stretchMe">
UPDATE
Use flex:1 on the cards so they use all the remaining space
Set the sub Grids with the container and direction="column" to that the elements are correctly placed.
The code should look like this:
const useStyles = makeStyles((theme) => ({
divider: {
borderBottom: `1px solid ${theme.palette.divider}`
},
stretchMe: {
height: "100%",
flex: 1
}
}));
const Cards= () => {
const classes = useStyles();
return (
<Grid
style={{backgroundColor:"cyan"}}
container
xs={12}
spacing={3}
justify="space-between"
alignItems="stretch"
>
<Grid container direction="column" item xl={2} lg={2} md={6} xs={12}>
<Typography variant="h4">Big Title 1</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 1</Typography>
<Avatar />
</CardContent>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 2</Typography>
<Typography variant="h4">Content</Typography>
</CardContent>
<CardContent className={classes.divider}>
<Grid container>
<Grid item xs={6}>
<Typography variant="h6">Little Title 3</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="h6">Little Title 4</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid container direction="column" item xl={4} lg={4} md={6} xs={12}>
<Typography variant="h4">Big Title 2</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid container direction="column" item xl={3} lg={3} md={6} xs={12}>
<Typography variant="h4">Big Title 3</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid container direction="column" item xl={3} lg={3} md={6} xs={12}>
<Typography variant="h4">Big Title 4</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
</CardContent>
</Card>
</Grid>
</Grid>
);
};
export default Cards;
This is because you passed the className prop as a string, not a variable.
So, correct format should be className={classes.stretchMe}
import React from 'react';
const useStyles = makeStyles((theme) => ({
root: {
height: "100%"
},
divider: {
borderBottom: `1px solid ${theme.palette.divider}`,
"&:last-child": {
flex: "1"
}
},
stretchMe: {
display: "flex",
flexDirection: "column",
flex: "1"
},
gridItem: {
display: "flex",
flexDirection: "column"
}
}));
const Cards= () => {
const classes = useStyles();
return (
<Grid container spacing={2} className={classes.root}>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 1</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 1</Typography>
<Avatar />
</CardContent>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 2</Typography>
<Typography variant="h4">Content</Typography>
</CardContent>
<CardContent className={classes.divider}>
<Grid container direction="row">
<Grid item xs={6}>
<Typography variant="h6">Little Title 3</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="h6">Little Title 4</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 2</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 3</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 4</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
</CardContent>
</Card>
</Grid>
</Grid>
);
};
export default Cards;
I want to achieve the given style.
Currently, I have
<Box display="flex" flexDirection="row" alignItems="center" width={1}>
<Box flexGrow="1">
<Typography variant="h6">
{subscription.PlanName}
<Box
px={1}
py={0.5}
color={"primary.contrastText"}
className={classes.success}
display="flex"
alignItems="center"
justifyContent="space-between"
>
{subscription.Status}
</Box>
</Typography>
<Typography variant="caption" component="div">Purchased on: <b>{moment(subscription.StartDate).format("DD-MM-YYYY")}</b></Typography>
<Typography variant="caption" component="div">Expiring on: <b>{moment(subscription.EndDate).format("DD-MM-YYYY")}</b></Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
onClick={Actions.openBillingDrawer}>
UPDATE CREDITS
</Button>
</Box>
<Box>
<Button
variant="contained"
color="primary"
onClick={Actions.openBillingDrawer}>
UPGRADE PLAN
</Button>
</Box>
Also, the UPDATE CREDITS button is different from which I am currently using. Please provide the correct button for that too.
it is not exactly your goal, but its a good place to start. You've got the right separation of boxes, right size of the green box and a iconButton:
<Box
display="flex"
flexDirection="row"
alignItems="center"
width={1}
justifyContent="space-between"
>
<Box>
<Box display="flex" alignItems="flex-end" margin="5px 0">
<Typography variant="h4" style={{ lineHeight: "0.8" }}>
Basic Plan
</Typography>
<Box
color="primary.contrastText"
bgcolor="success.main"
fontSize="8px"
padding="2px 4px"
marginLeft="6px"
>
ACTIVE
</Box>
</Box>
<Typography variant="caption" component="div" color="textSecondary">
Purchased on: <b>01-01-2020</b>
</Typography>
<Typography variant="caption" component="div" color="textSecondary">
Expiring on: <b>02-02-2020</b>
</Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
endIcon={<ArrowDropDownIcon />}
>
UPDATE CREDITS
</Button>
<Button variant="contained" color="primary">
UPGRADE PLAN
</Button>
</Box>
</Box>
The image enclosed shows the current state of the Segment. Is there a way to make them the same height?
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid>
);
}
Thanks in advance!
There are two things to look at here. First, you need to add a Grid.Row component in between your Grid component and Grid.Column components. Then you need to add a stretched prop to it.
Add this: <Grid.Row stretched>
Luckily, the styles for this are already part of Semantic UI CSS.
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Row stretched>
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid.Row>
</Grid>
);
}