'Input text overlaps inside button

I have a text type input, and a + button in the right side of it, the way I did this:

//html

<div class="input-wrapper">
    <input type="email">
  <button mat-icon-button>
    <mat-icon matSuffix>add_circle_outline</mat-icon>
  </button>
</div>

//css
.input-wrapper {
  display: flex;
  padding: 0 25px;

  button {
    margin-left: -50px;
    margin-top: 17px;

    mat-icon {
      font-size: 24px;
    }
  }
}

The problem is , when the text in the input is too long it overlaps the button,is there any way to fix this without moving the button outside of the input?

Image below..

enter image description here

css


Solution 1:[1]

Give a background to your button and padding-right to your input. See the snippet below:

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

button{
  border: none;
  background: #fff;
  position: relative;
  left: -22px;
}

input{
  padding-right: 20px;
  width: 100px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">

<div>
  <input type="email">
  <button>
    <i class="bi bi-plus-circle"></i>
  </button>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yong

Related Questions