0

I used the endAdornment prop to insert a button in a TextField. Even with position set to 'start', the button appears to the far right of the field. I want it to appear right next to the Text. I realize that I can place it immediately to the left of the Text using startAdornment. That is not what I want.

                <TextField 
                    value='Text'
                    InputProps={{ 
                        endAdornment: (
                            <InputAdornment position="start">
                            <IconButton>
                                <InfoOutlined />
                            </IconButton>
                            </InputAdornment>
                        )
                    }}
                />

I tried using display: 'flex', justifyContent: 'start', justifyItems: 'start', justifySelf: 'start'. None of these effected the alignment.

Andre
  • 1
  • 1
  • The text is within the html `` element which has a particular width. The adornment is placed to the right of that `` element. You won't get the adornment right next to the text unless you resize the `` element to be the same size as the text within it. – Ryan Cogswell May 13 '23 at 02:05
  • Hi @Andre. You could try using the **multiple** and **renderTags** properties to render a single option as a combination of **option-and-icon**. Although *multiple* is used, the field is set up to only capture a single value. See this [demonstration](https://kofeigen.srht.site/so/so-76240389). If this works for you, I'll post the relevant code as an answer. – kofeigen May 13 '23 at 09:44

0 Answers0