I am struggling to understand why my InputAdornment is not positioned correctly.
There doesn't seem to be any style in my code that would affect the location of the icon within the TextField (such as padding or flex properties).
Currently, the calendar icon does not align properly with the text field input line.
This is how I want it to look - but with a calendar icon instead of 'kg' :)
Here are some snippets from my styles object:
const useStyles = makeStyles(theme => ({
input: {
'& input, textarea': {
paddingTop: 8,
paddingBottom: 12,
fontSize: 15,
marginTop: 15,
'&:focus': {
borderBottomColor: COLORS.BLACK
},
'&::placeholder': {
fontSize: 15
}
},
},
...
dashboardInput: {
'& .MuiInputLabel-root': {
color: theme.palette.text.primary,
fontSize: 16,
},
'& input, textarea': {
borderBottom: `1px solid ${COLORS.BLACK}`,
fontSize: 16,
'&::placeholder': {
color: theme.palette.grey[400],
},
'&:disabled': {
color: COLORS.BLACK
}
},
'& .MuiFormHelperText-root': {
color: theme.palette.grey[500],
fontSize: 10
},
},
...
inputLimiter: {
textAlign: 'right',
fontSize: 10
},
...
},
}));
The relevant part of the component is shown below:
<FormControl
fullWidth
className={classNames(classes.input, getInputStyle(appearance), {
[classes.error]: error
})}
>
<InputLabel shrink htmlFor={name}>
<div className={classes.divcontrol}><div>{label}</div><div className={classes.redAsterisk}>*</div></div>
</InputLabel>
<TextField
id={name}
placeholder={placeholder}
fullWidth
multiline={multiline}
rows={multiline ? rows : 0}
type={type}
style={style}
inputProps={{
maxLength,
}}
defaultValue={defaultValue}
disabled={disabled}
onChange={e => onChangeWithRightType(e)}
InputLabelProps={{
shrink: true,
}}
value={value}
{...props}
InputProps={{
disableUnderline: true,
endAdornment: (
<InputAdornment position="end">
<DateRange />
</InputAdornment>
),
}}
error
helperText={helperText}
/>
{maxLength && (
<Typography variant="body2" className={classes.inputLimiter}>
{value ? String(value).length : 0}/{maxLength}
</Typography>
)}
</FormControl>