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

Question

Here 是 jsfiddle

应用布局边距指令时，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

它创建了一个可滚动的容器。一般来说，你至少应该用这个容器包围你的 application/webpage，因为它为其他 md 容器和指令创造了 "correct" 条件。

给你：

<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>

Fiddle: https://jsfiddle.net/bgo6z1nm/1/

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

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

Angular-material: md-select moves container element

css

angularjs

flexbox

angular-material