javascript - showing two inputs side by side - Stack Overflow

admin管理员组

文章数量:1410717

Would it possible to write two inputs side by side? I am using matInput forms of Angular and i could not bring the 2nd input beside the 1st.

What I want to show is like: "input1 , input2" in the same line. Here is my code.

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
  </form>
</div>

Would it possible to write two inputs side by side? I am using matInput forms of Angular and i could not bring the 2nd input beside the 1st.

What I want to show is like: "input1 , input2" in the same line. Here is my code.

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
  </form>
</div>

• javascript
• css
• html
• angular

Share Improve this question Follow edited Mar 1, 2018 at 6:51 Bhuwan 16.9k55 gold badges3737 silver badges6060 bronze badges asked Mar 1, 2018 at 6:47 MadMaxMadMax 30611 gold badge55 silver badges1818 bronze badges 1

• I have tried using "col-sm-6" class of bootstrap before each <mat-form-field> and put them in a "container" but again it did not work. – MadMax Commented Mar 1, 2018 at 6:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

The problem with your table is that you put 2 columns into 2 rows separately instead of 2 columns in 1 row, try like this:

<table>
 <tr>
  <td>1st column</td>
  <td>2nd column</td>
 </tr>
</table>

So this case, the 1st colum will inline next to 2nd column.

Try this.

<div *ngIf="data.mod=='goLocation'" class="panel-body">
        <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
            <table>
                <tr>
                    <td>
                        <mat-form-field>
                            <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                   #lon="ngModel" ngModel required>
                            <mat-error *ngIf="lon.touched && lon.invalid">
                                <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                     <td>
                        <mat-form-field>
                            <input matInput placeholder="Latitude(Y)" name="lat" id="lat"
                                   #lat="ngModel" ngModel required>
                            <mat-error *ngIf="lat.touched && lat.invalid">
                                <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                </tr>

            </table>
            <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
        </form>
    </div>

 <div *ngIf="data.mod=='goLocation'" class="panel-body">
            <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
                <table>
                    <tr>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                       #lon="ngModel" ngModel required>
                                <mat-error *ngIf="lon.touched && lon.invalid">
                                    <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Latitude(Y)" 
                                       name="lat" id="lat"
                                       #lat="ngModel" ngModel required>
                                <mat-error *ngIf="lat.touched && 
    lat.invalid">
                                    <div *ngIf="lat.errors.required">Bu 
    alanı boş geçemezsiniz.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                    </tr>
                    <tr>
                        
                    </tr>
                </table>
                <button [disabled]="!f.valid" class="btn btn-outline-
    primary">Git</button>
            </form>
        </div>

Try to wrap both the button's td into a single tr.

Stack Snippet

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
  </form>
</div>

本文标签： javascriptshowing two inputs side by sideStack Overflow