diff --git a/src/components/chips/chips.scss b/src/components/chips/chips.scss
index fd6168e22c3..fea2aeb03f5 100644
--- a/src/components/chips/chips.scss
+++ b/src/components/chips/chips.scss
@@ -51,10 +51,15 @@ $contact-chip-name-width: rem(12) !default;
.md-contact-chips-suggestions li {
height: 100%;
}
+md-chips {
+ display: flex;
+}
.md-chips {
@include pie-clearfix();
- display: block;
+ display: flex;
+ flex-wrap: wrap;
+ flex-grow: 1;
font-family: $font-family;
font-size: $chip-font-size;
@include rtl(padding, $chip-wrap-padding, rtl-value($chip-wrap-padding));
@@ -143,9 +148,17 @@ $contact-chip-name-width: rem(12) !default;
line-height: $chip-height;
@include rtl(margin, $chip-margin, rtl-value($chip-margin));
padding: $chip-input-padding;
+ flex-grow: 1;
@include rtl(float, left, right);
input {
- &:not([type]),&[type="email"],&[type="number"],&[type="tel"],&[type="url"],&[type="text"] {
+ width: 100%;
+
+ &:not([type]),
+ &[type="email"],
+ &[type="number"],
+ &[type="tel"],
+ &[type="url"],
+ &[type="text"] {
border: 0;
height: $chip-height;
line-height: $chip-height;
diff --git a/src/components/chips/demoBasicUsage/index.html b/src/components/chips/demoBasicUsage/index.html
index 151b953e0d5..c7ed35a6753 100644
--- a/src/components/chips/demoBasicUsage/index.html
+++ b/src/components/chips/demoBasicUsage/index.html
@@ -1,11 +1,24 @@
- Use a custom chip template.
-
+ Use the default chip template.
+
+
+
+ Use ng-change and add-on-blur
+
+
+ Make chips editable.
+
+
+ Use a custom chip template with max chips.
-
- Use the default chip template.
-
-
+ Use a long placeholder with md-input-class.
+
-
-
- Use ng-change and add-on-blur
-
-
-
-
- Make chips editable.
-
-
-
Use Placeholders and override hint texts.
-
Use Placeholders and override hint texts.
container-hint="Chips container. Press the right and left arrow keys to change tag selection."
container-empty-hint="Chips container. Enter the text area, start typing, and then press enter when done to add a tag.">
-
Display an ordered set of objects as chips (with custom template).
Note: the variables $chip
and $index
are available in custom chip templates.
diff --git a/src/components/chips/demoBasicUsage/style.scss b/src/components/chips/demoBasicUsage/style.scss
index 113c3c4b0c1..06512a479ca 100644
--- a/src/components/chips/demoBasicUsage/style.scss
+++ b/src/components/chips/demoBasicUsage/style.scss
@@ -3,6 +3,9 @@
color: rgb(221,44,0);
margin-top: 10px;
}
+.demo-long-fruit-input {
+ min-width: 340px;
+}
.custom-chips {
md-chip {
position: relative;
diff --git a/src/components/chips/js/chipsController.js b/src/components/chips/js/chipsController.js
index 523b49d0f0e..fe5a1046489 100644
--- a/src/components/chips/js/chipsController.js
+++ b/src/components/chips/js/chipsController.js
@@ -81,6 +81,12 @@ function MdChipsCtrl ($scope, $attrs, $mdConstant, $log, $element, $timeout, $md
/** @type {string} */
this.addOnBlur = $mdUtil.parseAttributeBoolean($attrs.mdAddOnBlur);
+ /**
+ * The class names to apply to the autocomplete or input.
+ * @type {string}
+ */
+ this.inputClass = '';
+
/**
* The text to be used as the aria-label for the input.
* @type {string}
diff --git a/src/components/chips/js/chipsDirective.js b/src/components/chips/js/chipsDirective.js
index f07a268dd02..5d29807a8bc 100644
--- a/src/components/chips/js/chipsDirective.js
+++ b/src/components/chips/js/chipsDirective.js
@@ -33,7 +33,7 @@
*
*
* Style
- * - Colours for hover, press states (ripple?).
+ * - Colors for hover, press states (ripple?).
*
*
*