gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:41:11 27 4
gpt4 key购买 nike

Here是 jsfiddle

当应用 layout-margin 指令时,md-options 似乎与 body margin 发生了冲突。

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>

如何避免这种烦人的碰撞? margin 是必须的。

最佳答案

您需要的是一个 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>

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

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

关于css - Angular-material: md-select 移动容器元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30479912/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com