CODEWITHSUNDEEP
css
randomusernamessssss
randomusernamessssss

Reputation: 95

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

Upvotes: 0

Views: 238

Answers (1)

Yong
Yong

Reputation: 1685

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>

Upvotes: 1

Related Questions