Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 3bf6eb3

Browse files
topherfangioThomasBurleson
authored andcommitted
fix(mdChips): Autocomplete styling is incorrect.
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.
1 parent 4649b93 commit 3bf6eb3

File tree

2 files changed

+11
-3
lines changed

2 files changed

+11
-3
lines changed

src/components/chips/chips.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
$chip-font-size: rem(1.6) !default;
22
$chip-height: rem(3.2) !default;
33
$chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
4+
$chip-input-padding: 0 !default;
45
$chip-remove-padding-right: rem(2.2) !default;
56
$chip-remove-line-height: rem(2.2) !default;
67
$chip-margin: rem(0.8) rem(0.8) 0 0 !default;
@@ -62,7 +63,7 @@ $contact-chip-name-width: rem(12) !default;
6263
&:not(.md-readonly) {
6364
cursor: text;
6465

65-
.md-chip {
66+
.md-chip:not(.md-readonly) {
6667
padding-right: $chip-remove-padding-right;
6768
}
6869
}
@@ -122,7 +123,7 @@ $contact-chip-name-width: rem(12) !default;
122123
display: block;
123124
line-height: $chip-height;
124125
margin: $chip-margin;
125-
padding: $chip-padding;
126+
padding: $chip-input-padding;
126127
float: left;
127128
input {
128129
&:not([type]),&[type="email"],&[type="number"],&[type="tel"],&[type="url"],&[type="text"] {

src/components/chips/js/chipsDirective.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115

116116
var CHIP_INPUT_TEMPLATE = '\
117117
<input\
118+
class="md-input"\
118119
tabindex="0"\
119120
placeholder="{{$mdChipsCtrl.getPlaceholder()}}"\
120121
aria-label="{{$mdChipsCtrl.getPlaceholder()}}"\
@@ -232,7 +233,6 @@
232233
* Configures controller and transcludes.
233234
*/
234235
return function postLink(scope, element, attrs, controllers) {
235-
236236
$mdUtil.initOptionalProperties(scope, attr);
237237

238238
$mdTheming(element);
@@ -280,6 +280,13 @@
280280
}
281281
});
282282
}
283+
284+
// At the next tick, if we find an input, make sure it has the md-input class
285+
$mdUtil.nextTick(function() {
286+
var input = element.find('input');
287+
288+
input && input.toggleClass('md-input', true);
289+
});
283290
}
284291

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

0 commit comments

Comments
 (0)