Skip to content

Commit b9f4a1a

Browse files
committed
fix(material-experimental/mdc-form-field): color inputs not working
Fixes that the `color` type inputs didn't work due to a style override we had on top of MDC.
1 parent a1e8e40 commit b9f4a1a

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,18 @@
2525
// not work for us since we support arbitrary form field controls which don't necessarily
2626
// use an `input` element. We organize the vertical spacing on the infix container.
2727
.mdc-text-field--no-label:not(.mdc-text-field--textarea)
28-
.mat-mdc-form-field-control.mdc-text-field__input,
28+
.mat-mdc-form-field-control.mdc-text-field__input,
2929
.mat-mdc-text-field-wrapper .mat-mdc-form-field-control {
3030
height: auto;
3131
}
3232

33+
// Color inputs are a special case, because setting their height to
34+
// `auto` will collapse them. The height value is an arbitrary number
35+
// which was extracted from the user agent styles of Chrome and Firefox.
36+
.mat-mdc-text-field-wrapper .mat-mdc-form-field-control.mdc-text-field__input[type='color'] {
37+
height: 23px;
38+
}
39+
3340
// Root element of the mdc-text-field. As explained in the height overwrites above, MDC
3441
// sets a default height on the text-field root element. This is not desired since we
3542
// want the element to be able to expand as needed.

0 commit comments

Comments
 (0)