在md-content中使用textarea时,md-card height对内容没有响应

时间:2015-12-22 12:19:41

标签: javascript css angularjs angular-material

我正在设计一张类似facebook的明信片。当我用内容填充textarea时,卡片高度不会根据内容而改变。

我在md-content中插入了一个带有文本输入和textarea的表单。键入时我需要我的卡片根据textarea高度改变它的高度。

enter image description here

我的代码在这里:

<md-card flex class="post" ng-class="{sm: $mdMedia('sm'), md: $mdMedia('md'), lg: $mdMedia('lg')}">
                    <form name="postForm" role="form" method="POST">
                        <md-card-header class="row">
                            <md-card-avatar>
                                <img class="md-user-avatar" src="../assets/images/yeoman.png" />
                            </md-card-avatar>
                            <md-card-header-text>
                                <md-input-container class="md-block">
                                    <label>Post Title</label>
                                    <input ng-model="post.postTitle" data-ng-required="true">
                                </md-input-container>
                            </md-card-header-text>
                        </md-card-header>
                        <md-card-header class="row">
                            <md-card-avatar class="mr12">
                                <!--                                    <img class="md-user-avatar" src="../assets/images/yeoman.png" />-->
                            </md-card-avatar>
                            <md-card-header-text>
                                <md-input-container class="md-block">
                                    <label>Post something</label>
                                    <textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
                                </md-input-container>
                            </md-card-header-text>
                        </md-card-header>

                        <md-card-content class="p0" flex>
                            <md-card-actions layout="row" layout-align="start center">

                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <md-button class="btn btn-default btn-file">
                                        <label for="fileToUpload">
                                            <i class="mdi mdi-cloud-upload mr10"></i>
                                        </label><span class="fileinput-new">Upload</span><span class="fileinput-exists">Change</span>
                                        <input type="file" file="" data-ng-model="file" name="...">
                                    </md-button>
                                    <span class="fileinput-filename"></span>
                                    <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
                                </div>

                                <md-card-icon-actions class="pull-right" layout-align="end center">
                                    <button class="md-raised md-primary md-button md-ink-ripple pull-right" aria-label="toggle" type="button" data-ng-click="createPost()"><span class="ng-scope"><i class="mdi mdi-message-text mr10"></i>Post</span>
                                        <div class="md-ripple-container"></div>
                                    </button>
                                </md-card-icon-actions>

                            </md-card-actions>

                        </md-card-content>


                    </form>
                </md-card>

0 个答案:

没有答案