垂直堆叠 md-chips,同时将输入保持在顶部
Stacking md-chips vertically while keeping input on top
我一直在试用angular提供的md芯片,一直在尝试垂直堆叠。我看了演示,也看了这个答案:
Stack md-chips vertically angularjs
该答案的问题在于,随着添加更多筹码,输入字段会不断移动。我希望将输入字段保持在顶部,同时将筹码堆叠在输入字段下方。有没有什么方法可以通过可能改变 css 的任何方面或在那里有另一个输入字段来完成,或者 md-chips 不允许这样做吗?
与您提到的几乎相同的答案,但 float: none;
到容器。
md-chip {
clear: left;
}
.md-chip-input-container {
float: none;
}
CSS 位于 <style>
标签中,因为它需要在样式表
之后加载
angular
.module('MyApp', ['ngMaterial'])
.controller('demoCtrl', function($scope) {
$scope.myChips = ['AAA', 'BBB', 'CCC'];
});
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<style>
md-chip {
clear: left;
}
.md-chips {
background-color: beige;
}
.md-chips .md-chip-input-container {
float: none;
}
.md-chip-input-container .md-input {
border: 1px solid black !important;
margin-top: 8px;
}
</style>
</head>
<body>
<div ng-controller="demoCtrl" ng-app="MyApp">
<md-chips ng-model="myChips">
<md-chip-template>
<strong>{{$chip}}</strong>
</md-chip-template>
</md-chips>
</div>
</body>
我一直在试用angular提供的md芯片,一直在尝试垂直堆叠。我看了演示,也看了这个答案:
Stack md-chips vertically angularjs
该答案的问题在于,随着添加更多筹码,输入字段会不断移动。我希望将输入字段保持在顶部,同时将筹码堆叠在输入字段下方。有没有什么方法可以通过可能改变 css 的任何方面或在那里有另一个输入字段来完成,或者 md-chips 不允许这样做吗?
与您提到的几乎相同的答案,但 float: none;
到容器。
md-chip {
clear: left;
}
.md-chip-input-container {
float: none;
}
CSS 位于 <style>
标签中,因为它需要在样式表
angular
.module('MyApp', ['ngMaterial'])
.controller('demoCtrl', function($scope) {
$scope.myChips = ['AAA', 'BBB', 'CCC'];
});
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<style>
md-chip {
clear: left;
}
.md-chips {
background-color: beige;
}
.md-chips .md-chip-input-container {
float: none;
}
.md-chip-input-container .md-input {
border: 1px solid black !important;
margin-top: 8px;
}
</style>
</head>
<body>
<div ng-controller="demoCtrl" ng-app="MyApp">
<md-chips ng-model="myChips">
<md-chip-template>
<strong>{{$chip}}</strong>
</md-chip-template>
</md-chips>
</div>
</body>