Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular change MatInput Size

I am new to Angular 4 and started working with the material components, I copied a couple of example from the official documentation but didn't get the same result as the documentation :

How do I get change the textbox width ? I tried style="width: 200px;" style="width:100%"; class="col-md-x" But none of them worked, second thing is how to center that login container in the middle of the page ? I found a few answers here but none of them seems to be working as well, here is my 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> 

**

like image 946
Soufiane Touil Avatar asked Sep 30 '17 11:09

Soufiane Touil


People also ask

How do you change the size of a mat form field?

The key to adjusting the field size is actually just adjusting the font-size in the surrounding container. Once you do that, everything else will scale with it.

What is matInput?

Matinput is an Angular directive that primarily allows input and text area elements to work with a form field. With this, you can display placeholders perfectly, add custom error messages, a clear button, specify the maximum length of the text or add prefixes and suffixes for a seamless user experience.


2 Answers

To center in the container:

CSS:

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

To style matInput( priviously mdInput) try one of these:

  1. Use ::ng-deep:

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component. Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

CSS:

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

DEMO


2. Use ViewEncapsulation

... component CSS styles are encapsulated into the component's view and don't affect the rest of the application. To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes: .... None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Typscript:

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

CSS:

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

DEMO


3. Set styles in style.css

This time you have to 'force' styles with !important.

style.css

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

DEMO


4. Use inline style

<mat-form-field style="width:400px !important" ...>    ... </mat-form-field> 

DEMO

like image 84
Vega Avatar answered Sep 25 '22 11:09

Vega


[style.fontSize.px]=17 this attribute will change the size

<mat-form-field [style.fontSize.px]=17>   <input matInput placeholder="Template Name" value="{{templateName}}"> </mat-form-field> 
like image 42
BebnevRoman Avatar answered Sep 25 '22 11:09

BebnevRoman