2

I'm trying to display 2 input fields and a button side by side. Tried many combinations, but still no luck. The code block of the and is below. Can you please help on how to make them on the same row ide by side. Thanks so much

Code:

<div [id]="id" class="row" style="margin: 0rem; align-items: center">
...
   <ng-container [formGroup]="igf">
   ...
     <div class="p-0">
     ...
        <div class="input-group input-group-sm">
        ...
           <ng-container>
           ...
              <input> --first
              <div class="input-group">
              ...
                <input> --second

              </div>
           </ng-container>
        </div>
     </div>
   </ng-container>
</div>
Harry
  • 546
  • 6
  • 22
  • 50

1 Answers1

1

Option 1: No nested input-group

app.component.html

<div [id]="id" class="row" style="margin: 0rem; align-items: center;">
  <div class="p-0">
    <div class="input-group input-group-sm d-flex">
      <input />
      <input />
      <button type="submit">Submit</button>
    </div>
  </div>
</div>

See live demo.

Option 2: Nested input-group

If you want to have a nested input-group, then the following code will do the trick. Add style="display: inline-flex;" to the second input-group.

The code below also works within <ng-container>. See live demo.

app.component.html

<div [id]="id" class="row" style="margin: 0rem; align-items: center;">
  <div class="p-0">
    <div class="input-group input-group-sm">
      <input />
      <div class="input-group" style="display: inline-flex;">
        <input />
      </div>
      <button type="submit">Submit</button>
    </div>
  </div>
</div>

See live demo.

Rok Benko
  • 14,265
  • 2
  • 24
  • 49
  • Cervus, thank you so much for the answer and sorry for the late response. Unfortunately, it doesn't work. Also when I inspect some of the div elements. I see flex showing at the end of those elements. But I don't see that in your demo? Could that be a reason? I remember adding them sometime back, but removed it now – Harry Jan 31 '23 at 16:17
  • Can you please create a [CodeSandbox snippet](https://codesandbox.io/) (click "Try for free")? **I need to be able to reproduce the problem.** – Rok Benko Jan 31 '23 at 16:23
  • 1
    I was able to resolve the issue by removing a div for the 2nd input and adding class "p-0" to a parent div. But i will still mark yours as correct – Harry Feb 03 '23 at 16:49