title: Angular 4 Material 2 Remove placeholder superscript and error subscript space from input controls
body: <p>I am currently attempting to use some components from angular material inside a material styled table. The issue I'm having is that even though I can floatPlaceholder="never" and shouldPlaceholderFloat="false", the space above the control is still taken up by the placeholder. The same goes for the error text that sits below the input line.</p>
  
  <p>I want a consistent row height, and so do not want the placeholder space or error line space taken up. But I do want the behaviour where the underline highlights when the control is clicked (which you don't get if you take the control out of the form field.)</p>
  
  <p><a href="https://i.stack.imgur.com/WR7yy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WR7yy.png" alt="Angular Material placeholder and error space"></a></p>
  
  <p>How can I get rid of or hide this space?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;form&gt;
  
    &lt;div style='background-color:lightblue'&gt;
  
      &lt;mat-form-field style='background-color:lightgreen' floatPlaceholder="never" shouldPlaceholderFloat="false"&gt;
        &lt;mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food"&gt;
          &lt;mat-option *ngFor="let food of foods" [value]="food.value"&gt;
            {{food.viewValue}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  
      &lt;p&gt; Selected value: {{selectedValue}} &lt;/p&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have provided a plunker <a href="https://plnkr.co/edit/nkYoANFqXYZyen7aUJ7g" rel="nofollow noreferrer">here</a>.</p>