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.

{{$chip}} @@ -17,30 +30,14 @@

Use a custom chip template.

Maximum number of chips reached.
-
-

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