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

Commit

Permalink
fix(input): Fix input errors CSS to properly display.
Browse files Browse the repository at this point in the history
Due to a CSS property that was not restrictive enough, standard
error messages were hidden by default.

Restrict CSS to components with the `md-auto-hide` class.

Also, remove the `md-maxlength` requirement from the errors demo
to reduce confusion.

Fixes #5837. References #5321.

Closes #6298
  • Loading branch information
topherfangio authored and jelbourn committed Dec 14, 2015
1 parent 9a33d1c commit 0eb7d8a
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/components/input/demoErrors/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<md-input-container class="md-block">
<label>Hourly Rate (USD)</label>
<input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
max="4999" ng-pattern="/^1234$/" md-maxlength="20" />
max="4999" ng-pattern="/^1234$/" />

<div ng-messages="projectForm.rate.$error" multiple md-auto-hide="false">
<div ng-message="required">
Expand Down
12 changes: 11 additions & 1 deletion src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -250,8 +250,18 @@ md-input-container {
}
}

// Note: This is a workaround to fix an ng-enter flicker bug
.md-auto-hide {
.md-input-message-animation {
&:not(.ng-animate) {
opacity: 0;
margin-top: -100px;
}
}
}

.md-input-message-animation {
&.ng-enter, &:not(.ng-animate) {
&.ng-enter {
opacity: 0;
margin-top: -100px;
}
Expand Down

0 comments on commit 0eb7d8a

Please sign in to comment.