CODEWITHSUNDEEP
cssreactjstypescriptdatepickermaterial-ui
Aleksandra S
Aleksandra S

Reputation: 37

Material-ui/pickers: When InputAdornmentProps property with position start added to KeyboardDatePicker an unwanted margin appears

I have this component from material-ui/pickers:

<KeyboardDatePicker
   value={selectedDate}
   onChange={(_, newValue) => handleClick(newValue)}
   labelFunc={renderLabel}
   disableToolbar
   variant='inline'
   inputVariant='filled'
   format='YYYYMMDD'
   allowKeyboardControl
   autoOk
   inputProps={{
     'data-testid': `input-${name}`
   }}
   InputAdornmentProps={{ position: 'start' }}
 />

This property is causing the problem. Without it the style is fine an the icon is centered vertically in the component. When I try to move the icon to the beginning of the component there appears an extra style:

    .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel) {
   margin-top: 16px;
}

That causes icon to be off-center. This is what it looks like without InputAdornmentProps: [1]: https://i.sstatic.net/xxGaM.png

And with it: [2]: https://i.sstatic.net/dHA53.png

What could be causing it?

Upvotes: 1

Views: 6696

Answers (2)

Casey Daly
Casey Daly

Reputation: 433

For me, what solved this issue was specify the KeyboardButtonProp - edge: "start. See here https://material-ui.com/api/icon-button/

Upvotes: 0

Eric
Eric

Reputation: 1357

try this as below, and refer to here for more details.

InputAdornmentProps={{ position: 'start', variant: 'standard' }}

Upvotes: 2

Related Questions