7
votes

Entrée de matériau angulaire et sélection dans un champ de formulaire

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

Quelle que soit la classe que je place ma feuille de style ne réduira pas la taille du menu de sélection. C'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>

material-design css angular-material

0 commentaires

3 Réponses :

0
votes

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

Dites-moi si cela fonctionne

2 commentaires

Pouvez-vous mettre du code html pur par capture d'écran inspecter la console, mate?

Veuillez envisager d'utiliser la bibliothèque angulaire Flex Layout et d'expliquer ce que signifient tous les attributs CSS de la flexbox .

7
votes

Vous pouvez envelopper votre champ de formulaire dans un div et lui attribuer une classe afin que vous puissiez imbriquer le CSS. La raison d'imbriquer le CSS est d'éviter qu'il n'affecte le reste des contrôles. J'ai fait quelque chose comme ceci:

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

puis ajoutez le CSS suivant quelque part dans le monde:

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

Démo

1 commentaires

Après avoir utilisé cela, la propriété mat-error ne fonctionne pas.

0
votes

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 commentaires