changement angulaire MatInput Taille

Question

Je suis nouveau à angulaire 4 et commencé à travailler avec les composants matériels, j'ai copié quelques exemple de la documentation officielle, mais n'a pas obtenu le même résultat que la documentation:

Comment est-ce que je change la largeur de la zone de texte? J'ai essayé style = "width: 200px;" style = "largeur: 100%"; class = "col-md-x" Mais aucun d'entre eux a travaillé, la deuxième chose est de savoir comment centrer ce conteneur de connexion au milieu de la page? J'ai trouvé quelques réponses ici, mais aucun d'entre eux semble fonctionner aussi bien, voici mon code:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 offset-md-3"> 
     <md-card> 
      <md-card-title>Login</md-card-title> 
      <md-card-content> 
      <form class="example-form"> 
       <div> 
       <md-form-field class="example-full-width"> 
        <input mdInput placeholder="Username" type="text"> 
       </md-form-field> 
       </div> 
       <div> 
       <md-form-field class="example-full-width"> 
       <input mdInput placeholder="Password" type="password"> 
       </md-form-field> 
       </div> 
      </form> 
      </md-card-content> 
     </md-card> 
     </div> 
    </div> 
</div> 

**

Answer 1

Pour centrer le conteneur:

CSS:

.container{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    width:100%; 
    } 

au style matInput (priviously mdInput) essayer un de ces:

1. Utilisation ::ng-deep:

Utilisez le/profond/descendant perçant l'ombre combinateur pour forcer un style à travers l'arborescence des composants de l'enfant dans tout le composant enfant vues. Le/deep/combinator fonctionne à n'importe quelle profondeur de composants imbriqués, et il s'applique à la fois les enfants de vue et les enfants de contenu du composant . Utilisez/deep /, >>> et :: ng-deep uniquement avec la vue émulée encapsulation. Émulé est l'affichage par défaut et le plus couramment utilisé . Pour plus d'informations, reportez-vous à la section Encapsulation de la vue Contrôle . Le combinateur descendant shadow-piercing est désapprouvé et le support est supprimé des principaux navigateurs et outils. En tant que tel, nous prévoyons de supprimer le support dans Angular (pour tous les 3/deep /, >>> et :: ng-deep). Jusque-là: ng-deep devrait être préféré pour une plus grande compatibilité avec les outils.

CSS:

::ng-deep .mat-input-wrapper{ 
     width:400px !important; 
    } 

DEMO

---

2. Utilisez ViewEncapsulation

... styles CSS composants sont encapsulées dans la vue du composant et n'affectent pas la reste de l'application. Pour contrôler le mode d'encapsulation par composant, vous pouvez définir le mode d'encapsulation de vue dans les métadonnées du composant. Choisissez parmi les modes suivants: .... Aucun ne signifie qu'Angular ne voit pas l'encapsulation. Angular ajoute le CSS aux styles globaux. Les règles de portée, les isolations et les protections décrites précédemment ne s'appliquent pas. C'est essentiellement le même que coller les styles du composant dans le code HTML.

TYPESCRIPT:

import {ViewEncapsulation } from '@angular/core'; 
    .... 
    @Component({ 
     .... 
     encapsulation: ViewEncapsulation.None 
}) 

CSS:

.mat-input-wrapper{ 
    width:400px !important; 
} 

DEMO

---

3. Set st yles in style.css

Cette fois, vous devez forcer les styles avec !important.

style.css

.mat-input-wrapper{ 
    width:400px !important; 
} 

DEMO

---

4. Utiliser un style en ligne

<mat-form-field style="width:400px !important;" class="example-full-width"> 
     <input matInput placeholder="Username" type="text"> 
</mat-form-field> 

DEMO