web-dev-qa-db-fra.com

Angular Material Input and select in one form field

Je veux le champ de saisie et le champ déroulant dans la même zone que celle de gauche (je l'ai fait sur l'inspecteur) Dropdown menus

Peu importe la classe que je mets dans ma feuille de style, cela ne réduira pas la taille du menu de sélection. Ceci est le code html que j'ai.

<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>
cssangular-materialmaterial-design
4
Luis Liz

Je ne comprends pas vraiment pourquoi :) mais cela fonctionne réellement

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

l'inconvénient est que la taille de la police est différente de l'entrée :(

0
Whisher

Voici ma 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">

Dis moi si ça marche

0
Cuong Hoang