Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(mdChips): Autocomplete styling is incorrect.
Browse files Browse the repository at this point in the history
The chips autocomplete had unnecessary styling and the default
autocomplete directive does not add the `md-input` class to it's
input, so it did not look correct.

Also fixes issue with md-chip readonly padding styles.

Fixes #4600. Closes #4621.
  • Loading branch information
topherfangio authored and ThomasBurleson committed Oct 29, 2015
1 parent 4649b93 commit 3bf6eb3
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 3 deletions.
5 changes: 3 additions & 2 deletions src/components/chips/chips.scss
@@ -1,6 +1,7 @@
$chip-font-size: rem(1.6) !default;
$chip-height: rem(3.2) !default;
$chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
$chip-input-padding: 0 !default;
$chip-remove-padding-right: rem(2.2) !default;
$chip-remove-line-height: rem(2.2) !default;
$chip-margin: rem(0.8) rem(0.8) 0 0 !default;
Expand Down Expand Up @@ -62,7 +63,7 @@ $contact-chip-name-width: rem(12) !default;
&:not(.md-readonly) {
cursor: text;

.md-chip {
.md-chip:not(.md-readonly) {
padding-right: $chip-remove-padding-right;
}
}
Expand Down Expand Up @@ -122,7 +123,7 @@ $contact-chip-name-width: rem(12) !default;
display: block;
line-height: $chip-height;
margin: $chip-margin;
padding: $chip-padding;
padding: $chip-input-padding;
float: left;
input {
&:not([type]),&[type="email"],&[type="number"],&[type="tel"],&[type="url"],&[type="text"] {
Expand Down
9 changes: 8 additions & 1 deletion src/components/chips/js/chipsDirective.js
Expand Up @@ -115,6 +115,7 @@

var CHIP_INPUT_TEMPLATE = '\
<input\
class="md-input"\
tabindex="0"\
placeholder="{{$mdChipsCtrl.getPlaceholder()}}"\
aria-label="{{$mdChipsCtrl.getPlaceholder()}}"\
Expand Down Expand Up @@ -232,7 +233,6 @@
* Configures controller and transcludes.
*/
return function postLink(scope, element, attrs, controllers) {

$mdUtil.initOptionalProperties(scope, attr);

$mdTheming(element);
Expand Down Expand Up @@ -280,6 +280,13 @@
}
});
}

// At the next tick, if we find an input, make sure it has the md-input class
$mdUtil.nextTick(function() {
var input = element.find('input');

input && input.toggleClass('md-input', true);
});
}

// Compile with the parent's scope and prepend any static chips to the wrapper.
Expand Down

0 comments on commit 3bf6eb3

Please sign in to comment.