1

I learn JavaScript React and now I have this question:

I have this Codesandbox

The problem I can't get the icon on the image below to stay to the right of the input

enter image description here

I want it to be like this:

enter image description here

I have tried using material Grid in various ways but I think I don't understand how to use wrapping, like wrap="nowrap".

I also tried like <Grid item style={{ position: 'absolute', bottom: 5, right: 5 }}> but the icon is outside the container.

halfer
  • 19,824
  • 17
  • 99
  • 186
Kid
  • 1,869
  • 3
  • 19
  • 48

1 Answers1

1

Try to use a display: flex in the tag that includes the input and the icon instead of grids. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ it may help you.

<div className="Test">
     <input className="form-control"
            placeholder="File Title"
            value={"theTitle"}
            type="text"/>
      <Avatar />
</div>

and the css is just

.Test {
 display: flex;
}
samuel potter
  • 189
  • 3
  • 13
  • I [tried](https://snipboard.io/hTeKiO.jpg) that but not difference really strange – Kid May 17 '21 at 19:02
  • I also tried like `` but the icon is outside the `container` so funny ` – Kid May 18 '21 at 17:34
  • 1
    @Kid in your screenshot you put the `div=className"Test`around the input, and you create another around the icons. But check how I made it in my example above. The input and the icon you wan to be aligned needs to be in the same `div`. – samuel potter May 19 '21 at 05:54