在输入线下堆叠md芯片

Question

I have seen some questions stacking md-chips vertically while keeping the input top but i want to stack md-chips under the input line like how it'll be in google and pinterest like this 我已经看到一些问题，在保持输入顶部的同时垂直堆叠md-chips，但我想在输入行下堆叠md-chips，例如在google和pinterest中的样子

I want the input field to be in top and chips should stack under the line 我希望输入字段位于顶部，并且芯片应堆叠在该行下
Here i have given code for vertical stacking 在这里，我给出了垂直堆叠的代码
Thank you 谢谢

 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>

Answer 1

Just clear this code where you wrote: 只需在您编写的位置清除以下代码即可：

md-chip {
   clear: left;
}

Here CodePen example 这里是CodePen的例子

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

Answer 2

I have found a solution a kind of hack or whatever by continuous changing the properties i got this 我通过不断更改我得到的属性找到了一种破解或其他解决方案
Here is the code pen 这是密码笔
https://codepen.io/avreddy/pen/ppzraz https://codepen.io/avreddy/pen/ppzraz

 angular .module('MyApp', ['ngMaterial']) .controller('demoCtrl', function($scope) { $scope.myChips = ['AAA', 'BBB', 'CCC']; });

 .md-chips { background-color: beige; display: flex !important; flex-wrap: wrap; } .md-chips md-chip{ order: 2; } .md-chips .md-chip-input-container { order: 1; width: 100%; } .md-chip-input-container .md-input { border: 1px solid black !important; margin-top: 8px; }

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

在输入线下堆叠md芯片

问题描述

2 个解决方案

解决方案1
0 2017-12-11 08:03:14

解决方案2
-1 已采纳 2017-12-11 09:33:02

在输入线下堆叠md芯片

问题描述

2 个解决方案

解决方案1 0 2017-12-11 08:03:14

解决方案2 -1 已采纳 2017-12-11 09:33:02

解决方案1
0 2017-12-11 08:03:14

解决方案2
-1 已采纳 2017-12-11 09:33:02