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

Commit 4bff2bb

Browse files
crisbetoThomasBurleson
authored andcommitted
fix(input): prevent the input from jumping when it becomes disabled
* The inputs used to offset their border with a -1px margin, however this caused all surrounding content to jump. This change switches to using `background-position` instead. * Fixes inputs not getting their disabled styles when they're in a disabled fieldset. Closes #7640. Closes #7919
1 parent ccfef92 commit 4bff2bb

File tree

2 files changed

+4
-3
lines changed

2 files changed

+4
-3
lines changed

src/components/input/input-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ md-input-container.md-THEME_NAME-theme {
7676
}
7777
.md-input {
7878
&[disabled],
79-
[disabled] {
79+
[disabled] & {
8080
border-bottom-color: transparent;
8181
color: '{{foreground-3}}';
8282
background-image: linear-gradient(to right, '{{foreground-3}}' 0%, '{{foreground-3}}' 33%, transparent 0%);

src/components/input/input.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -307,12 +307,13 @@ md-input-container {
307307
.md-input {
308308
&[disabled],
309309
[disabled] & {
310-
background-position: 0 bottom;
310+
// The negative border width offsets the dotted "border" so
311+
// it's placed in the same place as the solid one before it.
312+
background-position: bottom $input-border-width-default * -1 left 0;
311313
// This background-size is coordinated with a linear-gradient set in input-theme.scss
312314
// to create a dotted line under the input.
313315
background-size: 4px 1px;
314316
background-repeat: repeat-x;
315-
margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders
316317
}
317318
}
318319

0 commit comments

Comments
 (0)