Angular-material: md-select 移动容器元素

【问题标题】：Angular-material: md-select moves container elementAngular-material: md-select 移动容器元素
【发布时间】：2015-05-27 19:11:41
【问题描述】：

Here 是 jsfiddle

当应用 layout-margin 指令时，md-options 似乎与正文边距发生冲突。

HTML：

<body style="background-color: orange;" layout="row" ng-controller="AppCtrl" ng-app="StarterApp" layout-margin layout-fill>
  <div flex="35" class="md-whiteframe-z1 white">
    <md-select placeholder="Pick" ng-model="someVal">
      <md-option value="1">One</md-option>
      <md-option value="2">Two</md-option>
    </md-select>
  </div>
</body>

如何避免这种恼人的碰撞？边距是必须的。

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

您需要的是一个md-content 容器。

md-content 上的文档相当有限：https://material.angularjs.org/latest/#/api/material.components.content/directive/mdContent

它创建一个可滚动的容器。一般来说，你至少应该用这个容器包围你的应用程序/网页，因为它为其他 md 容器和指令创造了“正确”的条件。

给你：

<md-content>
  <md-select placeholder="Pick" ng-model="someVal">
    <md-option value="1">One</md-option>
    <md-option value="2">Two</md-option>
  </md-select>
</md-content>

小提琴：https://jsfiddle.net/bgo6z1nm/1/

更新：澄清一下，您不需要 md-content 容器。如果嵌套这些，您将拥有多个带有滚动条的元素。如果您不想使用这些，则必须自己创建边距、填充和其他 CSS。

【讨论】：