Skip to content

Commit

Permalink
fix(input): make icons in prefix/suffix the right size (#3342)
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba authored and kara committed Mar 4, 2017
1 parent be167c9 commit 63d4359
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 8 deletions.
9 changes: 2 additions & 7 deletions src/demo-app/input/input-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -206,13 +206,8 @@ <h4>Textarea</h4>
Both:
<md-input-container align="end">
<input mdInput #email placeholder="Email Address" value="angular-core">
<span mdPrefix>
<md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>
&nbsp;
</span>
<span mdSuffix class="demo-transform" [class.primary]="email.focused">
&nbsp;@gmail.com
</span>
<span mdPrefix><md-icon [class.primary]="email.focused">email</md-icon>&nbsp;</span>
<span mdSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
</md-input-container>
</p>

Expand Down
10 changes: 9 additions & 1 deletion src/lib/input/input-container.scss
Original file line number Diff line number Diff line change
Expand Up @@ -234,8 +234,16 @@ $mat-input-underline-disabled-background-image:
}
}

// Prevents the prefix and suffix from stretching together with the container.
.mat-input-prefix, .mat-input-suffix {
// Prevents the prefix and suffix from stretching together with the container.
width: 0.1px;
white-space: nowrap;

// Allow icons in a prefix/suffix to adapt to the correct size.
& .mat-icon {
width: auto;
height: auto;
font-size: 100%;
vertical-align: top;
}
}

0 comments on commit 63d4359

Please sign in to comment.