Angular-material：md-select移动容器元素
[英]Angular-material: md-select moves container element
问题描述
Here is the jsfiddle 
这是jsfiddle
It seems like the md-options are colliding with the body margin when the layout-margin directive is applied. 当应用layout-margin指令时， md-options似乎与body边缘冲突。
The HTML: 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>
How can i avoid this annoying collision? 我怎样才能避免这种恼人的碰撞？ The margin is a must have. 保证金是必须的。
1 个解决方案
解决方案1
3 已采纳 2015-05-27 11:03:51
What you need, is a md-content container. 你需要的是一个md-content容器。
The documentation on md-content is rather limited: https://material.angularjs.org/latest/#/api/material.components.content/directive/mdContent 有关md-content的文档相当有限： https ： //material.angularjs.org/latest/#/api/material.components.content/directive/mdContent
It creates a scrollable container. 它创建了一个可滚动的容器。 In general, you should at least surround your application/webpage with this container, since it creates the "correct" conditions for other md containers and directives. 通常，您应该至少使用此容器包围您的应用程序/网页，因为它为其他md容器和指令创建了“正确”条件。
Here you go: 干得好：
<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/ 小提琴： https ： //jsfiddle.net/bgo6z1nm/1/
UPDATE: To clarify, you don't NEED the md-content container. 更新：澄清一下，你不需要md-content容器。 If you nest these, you will have multiple elements with scrollers. 如果嵌套这些，您将有多个带滚动条的元素。 If you don't want to use these, you will have to create margins, padding and other CSS on your own. 如果您不想使用它们，则必须自己创建边距，填充和其他CSS。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.