We Keep Coding

MUI Grid not working on any size in a dialog

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>

Skeleton-Avatar and ImageButton in MUI React are forced to oval background shapes

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

How do you resize the DatePicker component from MUI5?

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>

Align React Components to the bottom of the container

I have the following component:
<div style={{display: 'flex', verticalAlign: "bottom"}}>
<FormControl fullWidth margin="normal" className="col-3">
<InputLabel style={colorStyle} htmlFor={field_meta.name}>{field_meta.title}</InputLabel>
<Input
id={field_meta.name}
defaultValue={field_meta.value? field_meta.value.id: ""}
value={this.state.fieldContent}
onChange={this.handleChange}
margin="normal"
startAdornment={field_meta.error &&
<InputAdornment position="start">
<i style={{color: "red"}} className="zmdi zmdi-alert-circle zmdi-hc-fw"/>
</InputAdornment>
}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="Buscar Valor"
onClick={this.handleSearchClick}
>
<i className={"zmdi zmdi-search"} onClick={this.handleSearchClick} />
</IconButton>
</InputAdornment>
}
/>
{() => {
if (field_meta.error) {
return <FormHelperText style={{color: "red"}}>{field_meta.error}</FormHelperText>
} else if ( field_meta.originalValue) {
return <FormHelperText style={{color: "orange"}}>Los cambios aún no se han guardado</FormHelperText>
} else {
return null;
}
}}
</FormControl>
{this.state.currentValue.id ?
<div className="col-9"><span>[{this.props.field_meta.value.id}]{this.props.field_meta.value.text}</span></div> :
<h2 className="col-9"></h2>}
</div>
I want the input and the span to align to the bottom of the container. I have tried several recommendations, but I always get the same result:

The css attribute to get what you want is this:
style={{display: 'flex', align-items: "flex-end"}}
Keep in mind that the direction of flex by default is row
You can get also the items to be at the bottom when the direction is flex-direction: column by doing this:
style={{display: 'flex', flex-direction: 'column', justify-content: 'flex-end'}}
Keep in mind also that flex affects the immediate children so, giving a quick glance at your code, you shouldn't apply the flex to the div, but to the FormControl component

Material UI Textfield Label

I am trying to scale a text field in Material UI so that it is responsive to changes in window dimensions. I have been able to scale the actual textfield size, but when I do the label no longer sits correctly in the textfield like so:
This is the code I use to create the textfield
<Autocomplete
freeSolo
options={top100Films.map(option => option.title)}
renderInput={params => (
<TextField {...params} label="Search for places, events or lists" variant="outlined"
InputLabelProps={{
style: {
overflow: 'hidden',
fontSize: '1vw',
},
}}
InputProps={{ ...params.InputProps,
endAdornment:
<InputAdornment position="end"><SearchIcon style={{fontSize:'1.5vw'}}/></InputAdornment>,
style: {
padding: '0.5vw',
},
}}
inputProps={{ ...params.inputProps,
style: {
padding: '0.5vw',
height: '1vw',
}
}}
/>
)} {...props} />
Has anyone had issues with making a textfield dynamic and would know how to go about this issue?