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>
Related
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
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 want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
size="small"
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
)}
/>
In your example, you can target the input element of the component you render in renderInput which is TextField using makeStyles
const useStyles = makeStyles({
customTextField: {
"& input::placeholder": {
fontSize: "20px"
}
}
})
<TextField
classes={{ root: classes.customTextField }}
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
Example below using forked MUI demo
You can just add the ::placeholder css to the class/id of the input field, and change the font-size
Example:
#tags-outlined::placeholder {
font-size: 14px;
}
The sx property allows users to override the styling applied to the MuiFormLabel-root object, including the font size. This is useful for creating custom labels that better suit the user's design needs.
<TextField
{...props}
sx={{
'& .MuiFormLabel-root': {
fontSize: '0.8rem',
},
}}
/>
I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.
However on the selection of an option the two texts get blurred like this:
Here is the code for the same:
<Grid item xs={6}>
<FormControl id="Process" style={{ width: "78%" }} size="small">
<InputLabel
htmlFor="Process"
id="Process"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Process
</InputLabel>
<Select
labelId="Process"
name="Process"
id="Process"
onChange={() => this.setState({ addModalShow: true })}
defaultValue={values.Process}
variant="outlined"
inputProps={{
id: "Process"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<Button
variant="outlined"
color="primary"
onClick={() => this.setState({ addModalShow: true })}
size="small"
style={styles.button2}
>
+
</Button>
<label
id="process"
style={{ visibility: "hidden", color: "red" }}
>
Process cannot be blank
</label>
</Grid>
</Grid>
Could anyone please tell me why this is happening?
Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.
If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:
Remove style customization, I mean remove this css:
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
put a condition to InputLabel content. Something like:
{values.Process === "" && "Process"}
In this way, Process label will be visible only if you haven't selected nothing on Select component.
Here a codesandbox example.
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?