Angular Material Input and select in one form field

Question

I want the input field and the drop down field in the same area like the one on the left (I did this on the inspector)

No matter what class I put in my stylesheet it won't shrink the size of the select menu. This is the html code I have.

<mat-form-field appearance="outline">
     <mat-label>End Time</mat-label>
     <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
          <mat-option value="AM">AM</mat-option>
          <mat-option value="PM">PM</mat-option>
     </mat-select>
</mat-form-field>

Awad Maharoof · Accepted Answer · 2019-01-08 04:27:14Z

12

You could wrap your form field in a div and assign it a class so that you can nest the CSS. The reason to nest the CSS is to avoid it affecting the rest of the controls. I did something like this:

<div class="time-picker-component">
    <mat-form-field appearance="outline">
        <mat-label>End Time</mat-label>
        <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
          <mat-option value="AM">AM</mat-option>
          <mat-option value="PM">PM</mat-option>
     </mat-select>
   </mat-form-field>
</div>

and then add the folloing CSS somewhere globally:

.time-picker-component .mat-form-field-infix {
  display: inherit;
}

Demo

edited Jan 8, 2019 at 4:27

answered Jan 8, 2019 at 4:21

Awad Maharoof

2,3901 gold badge27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thirupathi · Accepted Answer · 2023-09-15 17:07:35Z

4

Just add matSuffix directive on mat-select

<mat-form-field appearance="outline">
 <mat-label>End Time</mat-label>
 <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
 <mat-select matSuffix name="ampm" class="ampm" [(ngModel)]="event.eampm">
      <mat-option value="AM">AM</mat-option>
      <mat-option value="PM">PM</mat-option>
 </mat-select>

edited Sep 15, 2023 at 17:07

answered Sep 15, 2023 at 17:05

Thirupathi

412 bronze badges

Comments

Cuong Hoang · Accepted Answer · 2019-01-08 03:48:25Z

0

Here is my solution:

<mat-form-field appearance="outline" style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;"> <--- put style here, im not sure the syntax but this is pseudo code
 <mat-label>End Time</mat-label>
 <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
      <mat-option value="AM">AM</mat-option>
      <mat-option value="PM">PM</mat-option>
 </mat-select>
 <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">

Tell me if it works

answered Jan 8, 2019 at 3:48

Cuong Hoang

5781 gold badge3 silver badges14 bronze badges

Comments

Whisher · Accepted Answer · 2019-10-31 10:20:01Z

0

I don't really understand why :) but this actually works

::ng-deep .mat-select-value {
  font-size: 100%;
}

the drawback is, the font size is different from the input :(

answered Oct 31, 2019 at 10:20

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Comments

ali arabpour · Accepted Answer · 2022-11-25 14:21:59Z

I also had the same problem and tried to use the mat-suffix/prefix

give it a try as below:

   </form>
        <mat-form-field [hintLabel]="var1.syntax" appearance="fill">
            <mat-label data-testid="label" [innerHTML]="descriptive text"></mat-label>
            <input matInput #myInput matSuffix type="text" formControlName="myControl">
            <mat-select #template class="flex-select" placeholder="Land"
                (selectionChange)="selectLand( $event.value , myInput)">
                <mat-option *ngFor="let var2 of structuredArray" [value]="var2.id">
                    {{var2.sign}}
                </mat-option>
            </mat-select>       
        </mat-form-field>
    </form>

Collectives™ on Stack Overflow

Angular Material Input and select in one form field

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related