javascript - Angular md-input-container 调整大小

Question

我有一个剩余的项目传递给我，我最初不知道如何使用 angular-md，我已经习惯了 Bootstrap 。当下表的高度增加时，为什么我的 md-input-container 总是调整大小？下表调整大小时，如何让它保持静态，不调整大小？

来自:

到:

检查描述标签

这是我的代码:

<h5 class="section-title">Prize Details</h5>

<md-input-container flex ng-show="prizeActive">
    <label for="prize-title">Title:</label>
    <input ng-disabled="!editing" id="prize-title" ng-model="prizeTitle" type="text">
</md-input-container>

<md-input-container flex ng-show="prizeActive">
    <label for="prize-description">Description:</label>
    <textarea ng-disabled="!editing" id="prize-description" ng-model="prizeDescription" md-maxlength="4096"
              columns="1" rows="5"></textarea>
</md-input-container>

<md-input-container flex ng-show="prizeActive">
    <md-button id="edit-user" class="md-fab" aria-label="Edit Account Details" ng-click="toggleEditing()" style="background-color: rgb(255,209,0); float:right; margin-top:15px;" >
        <md-icon ng-hide="editing" aria-label="Edit" md-svg-src="icons/ic_mode_edit_white_24px.svg"></md-icon>
        <md-icon ng-show="editing" aria-label="Save" md-svg-src="icons/ic_done_white_24px.svg"></md-icon>
    </md-button>
</md-input-container>

<h5 class="section-title">High Scores</h5>

<md-input-container >
  <label for="prize-select">Prize</label>
  <md-select ng-model="prizeSelected" id="prize-select" ng-change="updateHighscoreTable()">
    <md-option ng-repeat="prize in prizes" ng-value="prize">{{prize.title}} - Ended {{prize.when_ended}}</md-option>
  </md-select>
</md-input-container >

<table class="table table-bordered">
  <tr>
    <th style="background-color: rgb(255,209,0)"> Name </th>
    <th style="background-color: rgb(255,209,0)"> Highscore </th>
    <th style="background-color: rgb(255,209,0)"> When Scored </th>
  </tr>
  <tr ng-repeat="h in highscores">
    <td>{{ h.name }}</td>
    <td>{{ h.score }}</td>
    <td>{{ h.when_scored }}</td>
  </tr>
  <tr>
    <td>Hello World 1</td>
    <td>1</td>
    <td>2016-06-06</td>
  </tr>
  <tr>
    <td>Hello World 2</td>
    <td>2</td>
    <td>2016-06-07</td>
  </tr>
  <tr>
    <td>Hello World 3</td>
    <td>3</td>
    <td>2016-06-08</td>
  </tr>
</table>

<div class="row">
  <div class="col-lg-12 text-right">
    <button class="btn btn-warning" style="background-color: rgb(255,209,0); border-color: rgb(255,209,0); color:#000">End Prize</button>
    <button class="btn btn-warning" style="background-color: rgb(255,209,0); border-color: rgb(255,209,0); color:#000">Clear Prize</button>
    <button class="btn btn-warning" style="background-color: rgb(255,209,0); border-color: rgb(255,209,0); color:#000">Clear Highscores</button>
  </div>
</div>

Answer 1

我现在已经解决了这个问题!只需删除 flex，因为它声明了 0

的最小高度

    <md-input-container ng-show="prizeActive">
        <label for="prize-title">Title:</label>
        <input ng-disabled="!editing" id="prize-title" ng-model="prizeTitle" type="text">
    </md-input-container>

    <md-input-container ng-show="prizeActive">
        <label for="prize-description">Description:</label>
        <textarea ng-disabled="!editing" id="prize-description" ng-model="prizeDescription" md-maxlength="4096"
                  columns="1" rows="5"></textarea>
    </md-input-container>

    <md-input-container ng-show="prizeActive">
        <md-button id="edit-user" class="md-fab" aria-label="Edit Account Details" ng-click="toggleEditing()" style="background-color: rgb(255,209,0); float:right; margin-top:15px;" >
            <md-icon ng-hide="editing" aria-label="Edit" md-svg-src="icons/ic_mode_edit_white_24px.svg"></md-icon>
            <md-icon ng-show="editing" aria-label="Save" md-svg-src="icons/ic_done_white_24px.svg"></md-icon>
        </md-button>
    </md-input-container>