htmlcssangularjsmd-chip

Stacking md-chips vertically while keeping input on top

I have been trying out md-chips provided by angular and have been trying to stack them vertically. I looked at demos and also at this answer:

Stack md-chips vertically angularjs

The issue with that answer is that the input field keeps moving as more chips are added. I wish to keep the input field at the top while stacking the chips underneath the input field. Is there any way that can be done by possibly changing any aspect of css or having another input field there or does md-chips not allow that?

Solution

  • Almost same answer as you mentioned, but with float: none; to the container.

    md-chip {
  clear: left;
}

.md-chip-input-container {
    float: none;
}

    CSS is in a <style> tag because it needs to be loaded after stylesheets

    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>