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?
Related
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 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',
},
}}
/>
Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown .i.e profile picture and Name, can we get the same thing i.e profile picture and name in the renderInput textField
You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...
renderInput={(params, data) => (
<div style={{ position: "relative" }}>
{params.inputProps.value && (
<span
style={{
position: "absolute",
transform: "translateY(50%)",
marginLeft: "5px"
}}
>
{/* Write logic to have Icon from params.inputProps.value */}
{countryToFlag("AD")}
</span>
)}
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,
autoComplete: "new-password",
style: { paddingLeft: "20px" } // disable autocomplete and autofill
}}
/>
</div>
)}
As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).
Here is the complete and running sandbox project
I am trying to add just the default 14px padding-left set by startAdornment and want to make it so the adornment takes up half of the TextField instead. I can't seem to figure out how to style the startAdornment in general.
I tried style the div itself, this works but there is still an underlying 14px padding left. I tried styling the InputAdornment itself but it seems to have no effect.
InputProps={
this.state.didChange[rowIndex] ? {
startAdornment: (
<InputAdornment
position="start"
component="div"
style={{paddingLeft: '-14px'}}
disablePointerEvents>
<div style={{ backgroundColor: '#D3D4D0', marginLeft: '-14px', padding: "10px 13px", width: "26px", color: '#a1a39b' }}>
{prevVals[rowIndex]}
</div>
</InputAdornment>
)
} : null} />
This is the result of my current code:
This is what I want:
You can ignore the border color difference that doesn't matter I can change that.
there are adornedStart and adornedEnd classes in FilledInput and OutlinedInput classes.so you can either use them or use TextField
InputProps dependig on what variant you use.
<TextField
name={'text'}
variant="outlined"
InputProps={{
endAdornment:
<IconButton onClick={()=>0}>x</IconButton>,
classes: {
adornedEnd: classes.adornedEnd
}
}}
/>
here is CodeSandbox
You can change the background color of the InputAdornment by removing the padding left of the OutlinedInput and set a matching padding in your adornment (based on the padding of the input here);
import MuiTextField from '#mui/material/TextField';
import { styled } from '#mui/material/styles';
const TextField = styled(MuiTextField)(({ theme }) => ({
'& .MuiOutlinedInput-root': {
paddingLeft: 0,
},
'& .MuiInputAdornment-root': {
backgroundColor: theme.palette.divider,
padding: '28px 14px',
borderTopLeftRadius: theme.shape.borderRadius + 'px',
borderBottomLeftRadius: theme.shape.borderRadius + 'px',
},
}));
<TextField
placeholder="Password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Visibility />
</InputAdornment>
),
}}
/>