0

I tried to figure out how to put a button into an input field but I can't find a solution. I want to have it looks like this

enter image description here

Currently it looks like this:

enter image description here

I'm using bootstrap for the input field and the Angular Material button.

<div class="input-group input-group-lg mb-4 mt-4">            
       <input type="text" name="name" class="form-control" placeholder="Suche starten">
          <button mat-mini-fab>
                <mat-icon>search</mat-icon>
          </button>
</div>

I also tried to wrap the button into a input-group-prepend div but it also did not work. I also tried with mat-form-field from Angular material but same like above, I cannot put this button into this input field.

Also asked google and but couldn't find any solutions...

Thanks in advance

Takuya2412
  • 187
  • 10
  • 1
    You need to use CSS to absolutely position the button inside the input-group. –  Mar 25 '21 at 13:32
  • You just need use some css to move button to the right an make border-radius: 0 for right corners of input – Alexey Baguk Mar 25 '21 at 13:34
  • `input-group-prepend` would put the button on the left side of the input. `input-group-append` puts it on the right. Then try adding `input-group-text` class to the button itself. – mykaf Mar 26 '21 at 16:13

0 Answers0