javascripthtmlangularjscssmd-chip

stacking md-chips below the input line

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 enter image description here

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>

Solution

  • 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 

    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>