title: Why will height not change for specific mat-form-field? (Angular 6)
body: <p><strong>Goal</strong>: Make the height of a particular mat-form-field smaller (but still keep it positioned where it is, to the right of "Please Sign In"). 
  It should take the minimum amount of space around the text value and dropdown arrow.</p>
  
  <p>It currently looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/c1HBU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c1HBU.png" alt="Width"></a></p>
  
  <p>I want the lines on the box around it to be closer to the word English and the down arrow.
  The box was created by adding: appearance="outline"</p>
  
  <p><strong>Problem</strong>: I was able to successfully change the width, but not the height.</p>
  
  <p><strong>What I've tried</strong>:</p>
  
  <ul>
  <li><p>I've gone through SO articles such as
  <a href="https://stackoverflow.com/questions/54760371/how-to-change-height-in-mat-form-field">How to change height in mat-form-field</a>
  and
  <a href="https://stackoverflow.com/questions/54102572/adjusting-height-of-mat-form-field-angular-material">Adjusting height of mat-form-field Angular Material</a></p></li>
  <li><p>I've tried adjusting the height itself (height: 40 px)</p></li>
  <li><p>I've tried minimizing the padding to make it look smaller
  (padding-top: -1.84375em; )</p></li>
  <li><p>I've tried changing it in Chrome Devtools but the text then aligns to
  the bottom of the box</p></li>
  </ul>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="title-container"&gt;
      &lt;mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1"&gt;
          Please Sign In
      &lt;/mat-card-title&gt;
      &lt;form [formGroup]="_siteForm"&gt;
          &lt;mat-form-field class="language-field" appearance="outline"&gt;
              &lt;mat-select (selectionChange)="doSomething($event)" [value]="languages[i]"&gt;
                  &lt;mat-option *ngFor="let language of languages" [value]="language"&gt;
                      {{language.viewValue}}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.title-container {
      position: relative;
      margin-top: 8px;
  }
  
  .language-field {
      position: absolute;
      right: 0;
      top: 0;
      margin-top: -16px;
      width: 115px;
      height:40px;
      padding-top: -1.84375em;    
  }
  </code></pre>