Skip to content

Commit

Permalink
fix(input): make start and end hints interact well when their text ne…
Browse files Browse the repository at this point in the history
…eds to wrap (#3979)
  • Loading branch information
mmalerba authored and jelbourn committed Apr 11, 2017
1 parent eaf16c8 commit 21cbf34
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 30 deletions.
9 changes: 9 additions & 0 deletions src/demo-app/input/input-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,15 @@ <h4>Textarea</h4>
<md-hint align="end">{{hintLabelWithCharCount.value.length}}</md-hint>
</md-input-container>
</p>
<p>
<md-input-container style="margin-bottom: 4em">
<textarea mdInput #longHint placeholder="Enter text to count"></textarea>
<md-hint>
Enter some text to count how many characters are in it. The character count is shown on the right.
</md-hint>
<md-hint align="end" style="white-space: nowrap">Length: {{longHint.value.length}}</md-hint>
</md-input-container>
</p>
<p>
<md-checkbox [(ngModel)]="color">Check to change the color:</md-checkbox>
<md-input-container [color]="color ? 'primary' : 'accent'">
Expand Down
4 changes: 3 additions & 1 deletion src/lib/input/input-container.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@
<div class="mat-input-hint-wrapper" *ngSwitchCase="'hint'"
[@transitionMessages]="_subscriptAnimationState">
<div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
<ng-content select="md-hint, mat-hint"></ng-content>
<ng-content select="md-hint:not([align='end']), mat-hint:not([align='end'])"></ng-content>
<div class="mat-input-hint-spacer"></div>
<ng-content select="md-hint[align='end'], mat-hint[align='end']"></ng-content>
</div>
</div>
</div>
33 changes: 4 additions & 29 deletions src/lib/input/input-container.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

$mat-input-floating-placeholder-scale-factor: 0.75 !default;
$mat-input-wrapper-spacing: 1em !default;
$mat-input-hint-min-space: 10px !default;

// Gradient for showing the dashed line when the input is disabled.
$mat-input-underline-disabled-background-image:
Expand Down Expand Up @@ -236,37 +237,11 @@ $mat-input-underline-disabled-background-image:

// Clears the floats on the hints. This is necessary for the hint animation to work.
.mat-input-hint-wrapper {
&::before,
&::after {
content: ' ';
display: table;
}

&::after {
clear: both;
}
display: flex;
}

// The hint is shown below the underline. There can be
// more than one; one at the start and one at the end.
.mat-hint {
display: block;
float: left;

// We use floats here, as opposed to flexbox, in order to make it
// easier to reverse their location in rtl and to ensure that they're
// aligned properly in some cases (e.g. when there is only an `end` hint).
&.mat-right {
float: right;
}

[dir='rtl'] & {
float: right;

&.mat-right {
float: left;
}
}
.mat-input-hint-spacer {
flex: 1 0 $mat-input-hint-min-space;
}

// Single error message displayed beneath the input.
Expand Down

0 comments on commit 21cbf34

Please sign in to comment.