How to vertically align an inputAdornment so it remains at the top in a multiline MUI TextField

Question

Using react I have a MUI multiline FieldText with a couple of inputAdornment icons aligned to the right.

As I fill it in, the box changes its height for every new line and the icons are vertically centered in the middle.

I am trying to make the icons remain aligned at the top but haven't been able to. Is there a way?

Sorry I cannot provide examples but I am barred from embedding images. Hope my question is clear and thanks in advance for your assistance.

Infinitive

Make the parent of the adornment relatively positioned and then position the adornment with absolute positioning, then you can put it wherever you'd like! – Anabantid

Answer 1

You mean something like this:

  <div sx={{position: 'relative'}}>
        <InputAdornment sx={{position: 'absolute', top: 0}}>
    ///icons
        </InputAdornment>
  </div>

Infinitive

Answer 2

It sounds like you're talking about using the MUI component library so this is how I did it. Using the sx property of TextField, you can style the component with alignItems:"flex-start" which will top-justify all elements, including the input adornment:

<TextField
    label={"Comment"}
    multiline
    minRows={1}
    maxRows={4}
    fullWidth={true}
    onChange={e => handleChange(e)}
    value={currentComment}
    InputProps={{
        endAdornment: <Button variant="contained" disabled={submitBtnDisabled}
                              onClick={submitNewComment}
                              sx={{
                                  marginLeft:"6px",
        }}
        >Submit</Button>,
        sx: {
            "& .css-3fezr7-MuiInputBase-root-MuiOutlinedInput-root" : {
                padding: "4px 8px 4px 8px"
            },
            fontSize: ".875rem;",
            alignItems:"flex-start"
        }
    }}/>

Here's how it looks for me:

Using this same method, you could also align it to the bottom using alignItems:"flex-end"

Jocko