I am using Material UI to create a list. My code below needs to reduce the height of the list element. I am not sure if it is padding or what. I tried setting <List dense={dense}> but it is still too spaced out.
<ListItem
button
onClick={() => {
board.current.setPosition(fenHistory[index + 1]);
plyViewed = index + 1;
}}
>
<ListItemText
classes={{ primary: classes.listItemText }}
primary={game.history()[index]}
/>
</ListItem>
The output current looks like the image below, but I want to reduce the height between the lines. Any ideas how?
Edit: Using the styling recommended in a reply, it is a little tighter now:
You can override default styles like this:
<ListItem button style={{ paddingTop: 0, paddingBottom: 0, margin: 0 }}>
<ListItemText primary={"sss"} style={{ lineHeight: 1, margin: 0 }} />
<ListItemText primary={"sss"} style={{ lineHeight: 1, margin: 0 }} />
<ListItemText primary={"sss"} style={{ lineHeight: 1, margin: 0 }} />
<ListItemText primary={"sss"} style={{ lineHeight: 1, margin: 0 }} />
</ListItem>
Related
This is my current state:
and my Code:
<ListItem
sx={{
textAlign: "left",
bgcolor: "#f6f6f6",
borderRadius: "10px",
marginBottom: "1rem",
}}
>
<ListItemText
sx={{ textAlign: "right" }}
primary={
<React.Fragment>
<Typography sx={{ textAlign: "right" }} color="text.primary">
{" "}
{" Lorem ipsum dolor sit amet"}
</Typography>
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography
sx={{
fontWeight: "bold",
fontSize: "12px",
textAlign: "right",
marginTop: 1,
}}
color="text.primary"
>
{" "}
{"22:44"}
</Typography>
</React.Fragment>
}
/>
<ListItemAvatar sx={{ ml: 2, textAlign: "right" }}>
<Avatar alt="Remy Sharp" src={w1} />
</ListItemAvatar>
</ListItem>
I want to resize the width of the white container (marked in a red border) to the size of the text of the "Typography" in my "primary" in "ListItemText". I tried to figure it out by inspecting the css but was not able to do it.
How can I resize the bubble according to my text value to make it look like a "chat bubble"?
On the ListItem we can add the following styles to the sx prop:
width: "fit-content" to make the width fit the content instead of using all available width
marginLeft: "auto" this will make sure the message stays on the right
<ListItem
sx={{
textAlign: "left",
bgcolor: "#f6f6f6",
borderRadius: "10px",
marginBottom: "1rem",
width: "fit-content",
marginLeft: "auto",
}}
>
...
</ListItem>
Note that the marginLeft: "auto" only applies for items on the right. If you want to have the same for the left items (blue) you can use marginRight: "auto"
See here for a live preview
I appreciate if anyone can give a solution to add space between or space evenly between the two IconButton inside the ImageListItem in Material UI. The code uses Material UI library inside Reactjs
<ImageListItem
key={item?.id}
cols={item.cols || 1}
rows={item.rows || 1}
>
<img
{...srcSetStyle(item.url, 121, item.rows, item.cols)}
alt={item.url}
loading="lazy"
/>
<ImageListItemBar
sx={{
background: "transparent",
top: "5%",
}}
position="top"
actionPosition="left"
actionIcon={
<>
<IconButton
sx={{ color: "red" }}
>
{item.isFavorite ? (
<FavoriteIcon className="favoriteIcon" />
) : (
<FavoriteBorderIcon
className="favoriteIcon"
/>
)}
</IconButton>
<IconButton
className="addIcon"
sx={{
color: "red",
}}
>
<AddCircleOutlineIcon />
</IconButton>
</>
}
/>
</ImageListItem>
You need to change flex-grow attributes of both MuiImageListItemBar-titleWrap and MuiImageListItemBar-actionIcon classes of ImageListItemBar like this:
sx={{
background: "transparent",
top: "5%",
"& .MuiImageListItemBar-titleWrap": {
flexGrow: 0
},
"& .MuiImageListItemBar-actionIcon": {
flexGrow: 1
}
}}
After that, you need to wrap your icons with a div and add desired style like this:
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
... (action button icons here)
</div>
You can take a look at this sandbox for a live working example of this solution.
I am using MUI with react. The dropdown menu is not aligning correctly. I am following https://mui.com/material-ui/react-menu/#account-menu document.
My text code:
//** A styled component **//
const StyledToolbar = styled(Toolbar)({
display: "flex",
justifyContent: "space-between",
backgroundColor: "#1e8e3e",
});
//** States **//
const [anchorEl, setAnchorEl] = useState(false);
const open = Boolean(anchorEl);
//** Actual Menu code **//
<Menu
id="account-menu"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={(e) => setAnchorEl(false)}
onClick={(e) => setAnchorEl(false)}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
PaperProps={{
elevation: 0,
sx: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
},
}}
>
<MenuItem>
<Typography variant="span">John K.</Typography>
</MenuItem>
<Divider />
<MenuItem>
<Avatar
sx={{ bgcolor: green[500], margin: ".5rem", width: 24, height: 24 }}
/>
Profile
</MenuItem>
<MenuItem>
<ListItemIcon sx={{ color: green[500], margin: ".5rem" }}>
<Settings fontSize="small" />
</ListItemIcon>
Settings
</MenuItem>
<Divider />
<MenuItem onClick={handleSignOut}>
<ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
<Logout fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
{error && <span className="span">Something went wrong!</span>}
</Menu>
If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} the Menu is starting from the bottom of the window:
If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'top' }} the Menu is starting from the top of the window but from the middle of the user profile image:
For many people, applying getContentAnchorEl={null} fixed the issue but for me its not working. I am using MUI v5.10.0
You need to specify an element to work as a reference, like an anchor, for the Menu to open from it. Or else it will just show in an edge of the page depending the anchorOrigin property settings you specify on the Menu component.
<>
<Button
id="basic-button"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
Menu
</Button>
<Menu
id="account-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={(e) => setAnchorEl(false)}
onClick={(e) => setAnchorEl(false)}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
transformOrigin={{ horizontal: "right", vertical: "top" }}
PaperProps={{
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "background.paper",
transform: "translateY(-50%) rotate(45deg)",
zIndex: 0
}
}
}}
>
<MenuItem>
<Typography variant="span">John K.</Typography>
</MenuItem>
<Divider />
<MenuItem>
<Avatar
sx={{ bgcolor: "green", margin: ".5rem", width: 24, height: 24 }}
/>
Profile
</MenuItem>
<MenuItem>
<ListItemIcon sx={{ color: "green", margin: ".5rem" }}>
<Settings fontSize="small" />
</ListItemIcon>
Settings
</MenuItem>
<Divider />
<MenuItem
>
<ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
<Logout fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
</Menu>
<>
Here is the working codesanbox
Current target was missing in the code. After applying the following code, able to fix it:
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
<Button
id="basic-button"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick} /* Need to include this to set the target pointer */
>
And remove getContentAnchorEl={null} entry from the <Menu>. Else it may generate the following error:
Warning: React does not recognize the `getContentAnchorEl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `getcontentanchorel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
How I can collapse only the click item?, I am using customize in material ui Customization
what I want is to show only the list of item in the select item this code will show all the list item not the list of the clicked item. I am only following the customization in the nested list in material ui and also I use the nested list it will show also the same output.
const [open, setOpen] = React.useState(false)
const handleToggle = () => {
setOpen((toggleOpen) => !toggleOpen)
}
const drawer = (
<Paper elevation={0} sx={{maxWidth: 256}}>
<StyledNav component="nav" disablePadding>
<ListItemButton component="a" href="/app/profile">
{loading ? (
<Typography>loading...</Typography>
) : data ? (
<Fragment>
<ListItemIcon
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
minHeight: 'fit-content',
padding: theme.spacing(0.5),
}}
>
<Avatar sx={useStyles.avatar} alt="User">
{getinitials(`${data.me?.lastname} ${data.me?.firstname}`)}
</Avatar>
</ListItemIcon>
<Stack>
<ListItemText
sx={{my: 0}}
primary={`${data.me?.lastname} ${data.me?.firstname}`}
primaryTypographyProps={{
fontSize: 20,
fontWeight: 'medium',
letterSpacing: 0,
}}
/>
<ListItemText
sx={{my: -1}}
primary={`${data.me?.username}`}
primaryTypographyProps={{
fontSize: 15,
fontWeight: 'medium',
letterSpacing: 0,
}}
/>
</Stack>
</Fragment>
) : null}
</ListItemButton>
<Divider />
{!loadingGetUserPagesAccess &&
dataGetUserPagesAccess &&
dataGetUserPagesAccess.userPagesAccess.map((pagegroup) => {
return (
<Fragment key={pagegroup.name}>
<List
sx={{
width: '100%',
maxWidth: 360,
bgcolor: open ? 'rgba(71, 98, 130, 0.2)' : null,
}}
subheader={<ListSubheader>{pagegroup.name}</ListSubheader>}
>
{pagegroup.pages?.map((page) => {
return (
<Fragment key={page.name}>
<ListItemButton
alignItems="flex-start"
onClick={handleToggle}
sx={{
px: 3,
pt: 2.5,
pb: open ? 0 : 2.5,
'&:hover, &:focus': {
'& svg': {opacity: open ? 1 : 0},
},
}}
disableGutters
>
<ListItemText
primary={page.name}
primaryTypographyProps={{
fontSize: 15,
fontWeight: 'medium',
lineHeight: '20px',
mb: '2px',
}}
secondaryTypographyProps={{
noWrap: true,
fontSize: 12,
lineHeight: '16px',
color: open
? 'rgba(0,0,0,0)'
: 'rgba(255,255,255,0.5)',
}}
sx={{my: 0}}
/>
<KeyboardArrowDown
sx={{
mr: -1,
opacity: 100,
transform: open ? 'rotate(-180deg)' : 'rotate(0)',
transition: '0.2s',
}}
/>
</ListItemButton>
{open &&
page.subpages &&
page.subpages.map((subpage) => {
return (
<ListItemButton
sx={{
py: 0,
minHeight: 32,
}}
>
<ListItemText
primary={subpage.name}
primaryTypographyProps={{
fontSize: 14,
fontWeight: 'medium',
}}
onClick={() => {
navigate(`/app/services${subpage.url}`)
}}
/>
</ListItemButton>
)
})}
</Fragment>
)
})}
</List>
</Fragment>
)
})}
</StyledNav>
</Paper>)
what should I do thank you..
I have a project to monitor employees and I have a sidebar in this project.
As is evident in the first two pictures, there is a sidebar, and inside it there is a button. Then I press the button, then the dialog appears in the "bottom left" of the page, and I want to do the same idea.
And the thing that I did is in the third picture,
I create a button within the sidebar, and when I click on this button, a dialog appears, but the dialog appears in the middle of the page and not at the bottom left of the page.
How can I solve this problem?
const useStyles = makeStyles((theme: Theme) =>
createStyles({
dialogPaper: {
maxWidth: '36rem',
height: '33rem',
},
border: {
borderBottom: '10rem'
}, paper: {
// padding: theme.spacing(2),
// textAlign: 'center',
// color: theme.palette.text.secondary,
},
dividerColor: {
backgroundColor: '#000000',
},
resize: {
fontSize: 24,
color: '#BDBDBD'
},
oneEdgeShadow: {
background: '#384047',
boxShadow: '0 0 0 4px #384047, 0 4px 4px black',
}
})
);
export default function FormDialog() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const navigation = useNavigate();
const onMySettings=() =>{
console.log('Clicked on My settings');
navigation('/dashboard/workspace-sidebar/settings');
}
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open form dialog
</Button>
<Dialog classes={{paper: classes.dialogPaper}} open={open} onClose={handleClose}
aria-labelledby="form-dialog-title">
<Grid container xs={12}>
<Grid item xs={2}>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{
fontWeight: 500,
fontSize: '11px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#BDBDBD'
}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
</ListItem>
</List>
</Grid>
<Divider classes={{root: classes.dividerColor}} orientation="vertical" flexItem/>
<Grid item xs={5}>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '10px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{
paddingBottom: '1rem',
fontWeight: 500,
fontSize: '10px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#BDBDBD'
}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
<ListItemText>Ali Baba {/*Workspaces*/}</ListItemText>
</ListItem>
<ListItem button>
<ListItemText primary="Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Import/Export"/>
</ListItem>
<ListItem button>
<ListItemText primary="People"/>
<Button onClick={handleClose} startIcon={<PersonAddIcon />} style={{
borderRadius: 2,background: '#7b68ee'}} variant="contained">
Invite
</Button>
</ListItem>
<ListItem button>
<ListItemText primary="Spaces"/>
</ListItem>
<ListItem button>
<ListItemText primary="Integrations"/>
</ListItem>
<ListItem button>
<ListItemText primary="Template Center"/>
</ListItem>
<ListItem button>
<ListItemText primary="Trash"/>
</ListItem>
<ListItem button>
<ListItemText primary="Security & Permissions"/>
</ListItem>
</List>
</Grid>
<Divider classes={{root: classes.dividerColor}} orientation="vertical" flexItem/>
<Grid item xs>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{paddingBottom: '1rem'}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
<ListItemText>Ali Baba</ListItemText>
</ListItem>
<ListItem button onClick={onMySettings}>
<ListItemText primary="My Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Notifications"/>
</ListItem>
<ListItem button>
<ListItemText primary="Layout size & style"/>
</ListItem>
<ListItem button>
<ListItemText primary="Rewards"/>
</ListItem>
</List>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button>
<ListItemText primary="Log out"/>
</ListItem>
<Divider classes={{root: classes.dividerColor}} variant="middle" />
<ListItem button>
<ListItemText primary="Help"/>
</ListItem>
<ListItem button>
<ListItemText primary="Hotkeys"/>
</ListItem>
<ListItem button>
<ListItemText primary="Dark mode"/>
</ListItem>
</List>
</Grid>
</Grid>
</Dialog>
</div>
);
}
You need to modify the paper style of the Dialog component.
First create your desirable style and position by makeStyles as below:
const useStyles = makeStyles({
paper: {
position: "absolute",
left: 0,
bottom: 0
}
});
and then pass it to the Dialog component:
<Dialog
classes={{ paper: classes.paper }}
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
>
working example in sandbox