When using mui Stack I get weird side effect of geting all the background shapes of Skeleton Avatar and background area smeared to oval|elipsoid shapes. I tried setting equal width and height for Avatar but id does not help.
How can I fix it throguh sx mui component property or css?
code fragment
<Box
noValidate autoComplete="off"
sx={{ marginLeft: '15%','& .MuiTextField-root': { m: 2, width: '25ch' }}}>
<div>
<form onSubmit={onSubmit} >
{formFields.map((form, index) => {
return (
<Fade in={true} sx = {{width: '95%'}} {...{ timeout: 500 }}>
<Stack direction="row" borderRadius="0" spacing={2} key={index} style ={{marginLeft: '-50px', }}>
{form.img? <Avatar alt="release img" src={form.img} sx={{ width: 56, height: 56 }} /> : <Skeleton animation={false} variant ='circular'> <Avatar sx={{ width: 56, height: 56}} /> </Skeleton>}
<TextField {/* ... */}/>
<IconButton onClick={() => removeFields(index)}><DeleteIcon /</IconButton>
</Stack>
</Fade>
)
})}
</form>
<IconButton onClick={addFields} color={'warning'}> <AddCircleOutlineOutlinedIcon /></IconButton>
<br></br><br></br>
<Button onClick={onSubmit} color={'warning'} variant="contained" endIcon= {<SendIcon/>} > Search links </Button>
Normally, the default value of align-items for flex items will be stretch, that's why you see your icon is stretched in the cross axis
The solution is simple, set alignItems prop in Stack to a different value rather than normal/stretch. Here I use center
<Stack
direction="row"
borderRadius="0"
spacing={2}
alignItems="center" // this line
style={{ marginLeft: "-50px" }}
>
Demo
References
CSS align-items
Related
SO im using a MUI dialog, and MUI grid together. I took this code directly from the website. The only changes are the box wrapping the dialog, and the slight change in the dialog functions IE 'openDialog' instead of 'open'. No matter what size I change the dialog to, the grid items remain in a three-column layout, when at 'xs' for example, they should stack to 12. I have no idea why, the code looks right to me.
<Box sx={{flexGrow: 1}}>
<Dialog
fullWidth={fullWidth}
maxWidth={maxWidth}
open={openDialog}
onClose={handleCloseDialog}
>
<DialogTitle>Optional sizes</DialogTitle>
<DialogContent>
<DialogContentText>
You can set my maximum width and whether to adapt or not.
</DialogContentText>
<Box
noValidate
component="form"
sx={{
display: 'flex',
flexDirection: 'column',
m: 'auto',
width: 'fit-content',
}}
>
<FormControl sx={{ mt: 2, minWidth: 120 }}>
<InputLabel htmlFor="max-width">maxWidth</InputLabel>
<Select
autoFocus
value={maxWidth}
onChange={handleMaxWidthChange}
label="maxWidth"
inputProps={{
name: 'max-width',
id: 'max-width',
}}
>
<MenuItem value={false}>false</MenuItem>
<MenuItem value="xs">xs</MenuItem>
<MenuItem value="sm">sm</MenuItem>
<MenuItem value="md">md</MenuItem>
<MenuItem value="lg">lg</MenuItem>
<MenuItem value="xl">xl</MenuItem>
</Select>
</FormControl>
<FormControlLabel
sx={{ mt: 1 }}
control={
<Switch checked={fullWidth} onChange={handleFullWidthChange} />
}
label="Full width"
/>
</Box>
<Grid container>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from(Array(6)).map((_, index) => (
<Grid item xs={12} sm={4} md={4} key={index}>
<Item>xs=2</Item>
</Grid>
))}
</Grid>
</Box>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Close</Button>
</DialogActions>
</Dialog>
It seems that this is because the Grid is changing layout based on responsive breakpoints of the viewport, instead of the container width. In the posted code, the Grid should change to just 1 column when the window is actually resized below sm, which is 600px.
If the purpose is to mock the responsive sizes, perhaps for a demo, consider to have Grid take value on conditions calculated from the selected maxWidth and fullWidth, instead of the actual viewport width.
Minimized demo on: stackblitz (might need to view in new tab for changes).
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from(Array(6)).map((_, index) => {
const responsive = { xs: 12, sm: 4, md: 4, lg: 2, xl: 2 };
const selected = responsive[`${maxWidth}`] || 0;
const mockedResponsive = Object.keys(responsive).reduce(
(acc, cur) =>
!fullWidth
? {
...acc,
[cur]: Math.max(
responsive[cur],
Math.max(selected, responsive["md"])
),
}
: { ...acc, [cur]: Math.max(responsive[cur], selected) },
{}
);
return (
<Grid item key={index} {...mockedResponsive}>
<Typography>xs=2</Typography>
</Grid>
);
})}
</Grid>
I'm in my first project with Material UI and React and there's a problem I've encountered in terms of design, I want to make sure that each AppBar is in a separate row, and stays the same size as in the image.
Note that I've already tried changing the container direction to columns'/rows, then it does each in a separate row but each AppBar takes up all the screen width and if I try to change the width to a certain percentage of the screen it loses proportion.
I would appreciate your assistance!
I'm attaching a picture of what my current situation is (I just want to put the slider under the Buttons AppBar )
this is the problem
return (
<main className={classes.content}>
{/* <div className={classes.toolbar} /> */}
<Grid container spacing={2} justify='center'>
<Grid item>
<AppBar
position='static'
sx={{
backgroundColor: '#212121 !important ',
borderRadius: 8,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
// width: "min",
// margin: "auto",
}}
style={{
border: 'solid white 0.1px',
}}
>
<Toolbar>
<Button
className={classes.btn}
sx={{
m: 2,
textTransform: 'capitalize',
}}
variant='outlined'
size='small'
//onClick={handleCategoryClicked}
>
filter by category
</Button>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'price')}
>
filter by price
</Button>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'rating')}
>
filter by rating
</Button>
</Toolbar>
</AppBar>
</Grid>
<Grid>
<AppBar
position='static'
sx={{
backgroundColor: '#212121 !important ',
borderRadius: 8,
}}
style={{ border: 'solid white 0.1px' }}
>
<Box sx={{ width: 300 }}>
<Slider
getAriaLabel={() => 'Temperature range'}
value={value}
onChange={handleChange}
valueLabelDisplay='auto'
getAriaValueText={valuetext}
/>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'pricerange')}
>
filter by Price Range
</Button>
</Box>
</AppBar>
</Grid>
I want to change the height of the datepicker and I have tried a lot of methods from sx to box style and none of them worked. I am wrapping it in a Box component for styling and when I inspect it in Dev tools, it says it's a Form component which makes sense. But changing the sx inside does not make any change too. I'm alright if the font size decreases, what should I do next to decrease the default height size?
code:
<Box
mt={1.6}
component="form"
sx={{
'& > :not(style)': {
m: 1,
width: '27ch',
height: 48,
backgroundColor: "white",
borderRadius: 1,
},
}}
noValidate
autoComplete="off"
>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Clear Date"
inputFormat="MM/dd/yyyy"
value={value}
onChange={handleChange}
renderInput={(params) =>
<TextField
{...params}
variant="standard"
size="small"
sx={{
px: 2,
}}
/>
}
/>
</LocalizationProvider>
</Box>
I'm trying to show adornments vertically in material ui Textfield but no luck. It's always positioned horizontally. Is there a way to show adornments vertically?
Code:
<TextField
variant="filled"
fullWidth
multiline
rowsMax={7}
onFocus={() => handleInputFocus({})}
onBlur={() => handleInputFocus({})}
InputProps={{
...(isSelected ? { endAdornment:
<InputAdornment position="start">
<Box mb={3}>
<SaveIcon color="primary" className={cursorStyle} onClick={() => deleteNote()} />
<DeleteIcon className={cursorStyle} onClick={() => deleteNote()} />
</Box>
</InputAdornment> }: {})
}}
/>
Actual Output:
Use display flex, try to add style={{ display: 'flex', flexDirection: 'column'}} in InputAdornment line as <InputAdornment position="start" style={{ display: 'flex', flexDirection: 'column'}}>
Then just fix your icon's style. Because probably they will be out of the box boundaries.
I have used material ui card and when i display it. It shows like below image. I want to show my card like that when cards do not fit the page it goes below and all card size must be same. How can i do that?
Here is my code:
const useStyles = makeStyles({ // Styling for my cards
root: {
width: 255,// i changed that line and below line but nothing happened
},
media: {
height: 190,
},
});
export default function AlbumsCard() {
const classes = useStyles();
..... //Some http requests
return (
<div>
<div>
<input
style={{
width: 500,
"margin-left": "auto",
"margin-right": "auto",
"margin-top": "10px",
}}
type="text"
placeholder="Search Album"
onChange={handleChange}
value={input}
/>
</div>
<div style={{ display: "flex" }}> //cardss
{k.map((album) => (
<Link
to={`/albums/${album.album_id}`}
style={{ textDecoration: "none", color: "#15cdfc" }}
>
<Card style={{ margin: "10px" }} className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={album.album_pfp}
title={album.album_name}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{album.album_name}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{album.album_song_count}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Link>
))}
</div>
</div>
);
}
Also the image from my app:
You can see that above. All cards placed in a line and some cards height's are different. Also there is a scroll bar.
I want to display whole card i a same size and when it overflows the page. It goes below.
Updated version:
Now each card has a different size how can i solve that? I think it is from image size.