Question

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>

我怎样才能避免这种恼人的碰撞？保证金是必须的。

Answer 1

您需要的是md-content容器。

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

它创建了一个可滚动的容器。一般情况下，您至少应该使用此容器包围您的应用程序/网页，因为它会创建正确的＆＃34;其他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。

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

1 个答案: