Issue
I can't figure out how my InputAdornment is getting improperly placed.
I can't see anything in my styles that would influence the position of the icon within the TextField (e.g. padding, flex stuff).
How it currently looks - calendar does not sit on the line/within text field input
How I would like it to look - but of course with a calendar icon and not a 'kg' :)
My styles object (with some ... used for brevity)
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 guts of the component:
<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>
Solution
About your question, I think you should set disableUnderline in InputProps to false.
InputProps={{
disableUnderline: false,
......
}}
Answered By - wildgamer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.