CODEWITHSUNDEEP
cssangular-materialmaterial-design
Luis Liz
Luis Liz

Reputation: 1959

Angular Material Input and select in one form field

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) Dropdown menus

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>

Upvotes: 8

Views: 38070

Answers (5)

Thirupathi
Thirupathi

Reputation: 31

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>

Upvotes: 3

ali arabpour
ali arabpour

Reputation: 11

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>

Upvotes: 0

Whisher
Whisher

Reputation: 32716

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 :(

Upvotes: 0

Awad Maharoof
Awad Maharoof

Reputation: 2360

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

Upvotes: 12

Cuong Hoang
Cuong Hoang

Reputation: 578

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

Upvotes: 0

Related Questions