Floating labels have no gap in table expandable rows with outline appearance

[Trent-Matthias]

Bug, feature request, or proposal:

Floating label in mat-form-field is not calculating a gap in expandable rows in a table.

What is the expected behavior?

That the form field gap is calculated like normal

What is the current behavior?

The label floats but no gap appears.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-1brv1b?file=app/table-expandable-rows-example.html

I simply forked the table with expandable rows example from the docs here https://material.angular.io/components/table/examples and added a very simple form field to the expansion panel.

What is the use-case or motivation for changing an existing behavior?

I'd like to have the ability to have a user add a note to a table entry using a text area. I use outline form fields throughout my app and would like to keep the styling for the table.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "^6.4.7"
"typescript": "~2.9.2"
"@angular/core": "^6.1.8"
This issue is in Chrome on Mac

Is there anything else we should know?

This happens even if I comment out the css.

[mmalerba]

This is because of the display: none in your animation, you can see here that removing it fixes the issue: https://stackblitz.com/edit/angular-1brv1b-9dxlbf?file=app/table-expandable-rows-example.ts

[starksds]

I also see the same issue when wrapping an element with [hidden]
`<div [hidden]="!conditionalShow">
mat form element with outline float always or auto

`

[noggin182]

I came across this same problem in a different place, here's a simplified example showing how display:none causes this issue:
https://stackblitz.com/edit/angular-bclu9w