Высота текста не изменяется с преподупляемым текстом

Question

У меня здесь небольшая проблема.

Я работаю над проектом, где мне нужно показать форму после того, как пользователь нажмет на вызов. Все хорошо до сих пор.

Проблема заключается в том, что когда пользователь нажимает кнопку, чтобы отобразить форму, текстовое поле не изменяет размер высоты в соответствии с текстом и выглядит неполным, пока пользователь не сосредоточит текстовое поле и не переместит клавиши со стрелками.

Вот код и пример в Codepen

<div ng-app="test"> 
    <div class="holder" ng-controller="MainCtrl" layout="row" layout-align="center center"> 
    <div class="blocker" ng-show="blocked"> 
     <md-button class="md-raised md-warn" ng-click="toggle()">See me</md-button> 
    </div> 
    <div class="form" ng-hide="blocked"> 
     <form name="myForm"> 
     <md-input-container flex> 
      <label>How are you</label> 
      <textarea ng-model="answer1" name='answer1'></textarea> 
     </md-input-container> 
     </form> 
    </div> 
    </div> 
</div> 

И часть Javascript

var app = angular.module('test', ['ngMaterial']); 

app.controller('MainCtrl', function($scope){ 
    $scope.answer1 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,"; 
    $scope.blocked = true; 
    $scope.toggle = function(){ 
    $scope.blocked = !$scope.blocked; 
    } 
}); 

http://codepen.io/Tmeister/pen/wajdgE

Может быть, это Угловая Материал ошибка или просто проблема CSS?

Заранее благодарен!

Answer 1

Ну, это официальная ошибка, и исправление подходит.

https://github.com/angular/material/commit/5fdcf905b4355c0385a02f59d2875b93e7a18ce4

Если вы хотите, чтобы вызвать использование TextArea Autogrow нг-если вместо нг скрывать/нг-шоу

<div ng-app="test"> 
    <div class="holder" ng-controller="MainCtrl" layout="row" layout-align="center center"> 
    <div class="blocker" ng-show="blocked"> 
     <md-button class="md-raised md-warn" ng-click="toggle()">See me</md-button> 
    </div> 
    <div class="form" ng-if="!blocked"> 
     <form name="myForm"> 
     <md-input-container flex> 
      <label>How are you</label> 
      <textarea ng-model="answer1" name='answer1'></textarea> 
     </md-input-container> 
     </form> 
    </div> 
    </div> 
</div> 

рабочего образца: http://codepen.io/Tmeister/pen/EjLXYm