Question

我遇到了一个非常奇怪的Angular Material Gird List问题（1.0.0-rc2 - 最新的Angular Material）。我有一个网格列表，其中包含3个带背景图像的元素。初始页面加载后，所有内容都正确加载。我在每个元素中都有一个删除按钮。单击时，它会清空背景图像URL值。单击删除按钮并清空背景图像URL值后，关联的网格图块将丢失其宽度和高度。内部元素只是浮动到左上角，布局都被打破了。以下是用于说明问题的代码：

http://codepen.io/hughred22/pen/GpXZgy

正如您在单击删除按钮后看到的那样，红色文本将丢失其位置并浮动到左上角。如果你检查瓷砖，它有0宽度和高度。

这是md-grid-list的HTML代码：

＆＃13;

<md-grid-list md-cols="6" md-cols-sm="6" md-row-height="1:1" md-gutter="0px" md-gutter-gt-sm="0px" style="background: black;">
  <md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[0].photo}}); background-size: cover;" class="top-tile-edit">
    <p style="color: red; font-weight: bold;">The Text which is representing the inside elements. It align center when loaded.</p>
    <md-grid-tile-footer>
      <md-button type="button" class="md-raised md-warn" ng-click="vm.deleteAddedPhoto(vm.picturesObj[0].photo)">
        Delete
      </md-button>
    </md-grid-tile-footer>
  </md-grid-tile>
  <md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[1].photo}}); background-size: cover;" class="top-tile-edit">
  </md-grid-tile>
  <md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[2].photo}}); background-size: cover;" class="top-tile-edit">
  </md-grid-tile>
</md-grid-list>

＆＃13;

在背景图像网址更改后，角度材质md-grid-tile宽度和高度变为0

0 个答案: