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

fix(datepicker): error message alignment in md-input-container #9504

Merged

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Sep 2, 2016

Fixes the datepicker error messages not being aligned with other md-input-container instances. The issue was caused by an unnecessary float on the input element and the calendar icon pushing down the messages. The fix removes the float and pulls the icon up with a margin while pushing it down via top.

Fixes #9342.

Before:
before

After:
after

BREAKING CHANGE:

CSS md-date-picker: Prevents the button from wrapping around, as well as it pushing down the error messages more than they should be.

.md-datepicker-button { 
  top : $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap / 2;
}

.md-input {
  float: none;
}

Fixes the datepicker error messages not being aligned with other `md-input-container` instances. The issue was caused by an unnecessary float on the input element and the calendar icon pushing down the messages. The fix removes the float and pulls the icon up with a margin while pushing it down via `top`.

Fixes angular#9342.
@crisbeto crisbeto added the needs: review This PR is waiting on review from the team label Sep 2, 2016
@ThomasBurleson ThomasBurleson added needs: presubmit and removed needs: review This PR is waiting on review from the team labels Sep 3, 2016
@ThomasBurleson ThomasBurleson added this to the 1.1.2 milestone Sep 3, 2016
@kara kara added pr: merge ready This PR is ready for a caretaker to review and removed needs: presubmit labels Sep 9, 2016
@kara kara merged commit 0592dfa into angular:master Sep 9, 2016
Frank3K pushed a commit to Frank3K/material that referenced this pull request Sep 11, 2016
…ar#9504)

Fixes the datepicker error messages not being aligned with other `md-input-container` instances. The issue was caused by an unnecessary float on the input element and the calendar icon pushing down the messages. The fix removes the float and pulls the icon up with a margin while pushing it down via `top`.

Fixes angular#9342.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
pr: merge ready This PR is ready for a caretaker to review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

mdDatepicker: mdInputContainer ngMessages unaligned with other input types
3 participants