javascript - Material UI - Show adornments vertically in TextField

Question

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:

question from:https://stackoverflow.com/questions/65911540/material-ui-show-adornments-vertically-in-textfield

Answer 1

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.