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

Commit 0592dfa

Browse files
crisbetokara
authored andcommitted
fix(datepicker): error message alignment in md-input-container (#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 #9342.
1 parent 9936185 commit 0592dfa

File tree

1 file changed

+9
-3
lines changed

1 file changed

+9
-3
lines changed

src/components/datepicker/datePicker.scss

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,18 @@ md-datepicker {
6767
}
6868

6969
.md-datepicker-button {
70-
// Prevents the button from wrapping around.
70+
// Prevents the button from wrapping around, as well as it pushing
71+
// down the error messages more than they should be.
7172
@include rtl(float, left, right);
72-
margin-top: -$md-datepicker-border-bottom-gap / 2;
73+
margin-top: $button-left-right-padding * -2;
74+
top: $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap / 2;
7375
}
7476
}
7577

78+
.md-input {
79+
float: none;
80+
}
81+
7682
&._md-datepicker-has-calendar-icon {
7783
> label:not(.md-no-float):not(.md-container-ignore) {
7884
$width-offset: $md-datepicker-triangle-button-width * 2 + $md-datepicker-button-gap;
@@ -195,7 +201,7 @@ md-datepicker {
195201
}
196202

197203
// Need crazy specificity to override .md-button.md-icon-button.
198-
// Only apply this high specifiy to the property we need to override.
204+
// Only apply this high specificity to the property we need to override.
199205
.md-datepicker-triangle-button.md-button.md-icon-button {
200206
height: $md-datepicker-triangle-button-width;
201207
width: $md-datepicker-triangle-button-width;

0 commit comments

Comments
 (0)