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

Commit 5ca3170

Browse files
topherfangiojelbourn
topherfangio
authored and
jelbourn
committed
fix(input): Remove unneccessary CSS error margin.
There was some extraneous CSS causing some elements within an input container to have a negative top margin. **Fixes** - Remove this CSS rule as it was no longer necessary. **Other Additions** - Update some input demos to fix `layout-padding` and alignment issues. - Move floating labels 1px right to line up with bottom border. Closes #6235
1 parent 3040fd2 commit 5ca3170

File tree

3 files changed

+81
-82
lines changed

3 files changed

+81
-82
lines changed

‎src/components/input/demoBasicUsage/index.html

+77-72
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,94 @@
11
<div ng-controller="DemoCtrl" layout="column" ng-cloak class="md-inline-form">
22

3-
<md-content md-theme="docs-dark" layout-padding layout-gt-sm="row">
4-
<md-input-container>
5-
<label>Title</label>
6-
<input ng-model="user.title">
7-
</md-input-container>
8-
9-
<md-input-container>
10-
<label>Email</label>
11-
<input ng-model="user.email" type="email">
12-
</md-input-container>
13-
</md-content>
14-
15-
<md-content layout-padding>
16-
<form name="userForm">
17-
18-
<div layout-gt-sm="row">
19-
<md-input-container class="md-block" flex-gt-sm>
20-
<label>Company (Disabled)</label>
21-
<input ng-model="user.company" disabled>
22-
</md-input-container>
23-
24-
<md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date"></md-datepicker>
25-
</div>
26-
27-
<div layout-gt-sm="row">
28-
<md-input-container class="md-block" flex-gt-sm>
29-
<label>First name</label>
30-
<input ng-model="user.firstName">
31-
</md-input-container>
32-
33-
<md-input-container class="md-block" flex-gt-sm>
34-
<label>Last Name</label>
35-
<input ng-model="theMax">
36-
</md-input-container>
37-
</div>
38-
39-
<md-input-container class="md-block">
40-
<label>Address</label>
41-
<input ng-model="user.address">
3+
<md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
4+
<div>
5+
<md-input-container>
6+
<label>Title</label>
7+
<input ng-model="user.title">
428
</md-input-container>
439

44-
<md-input-container md-no-float class="md-block">
45-
<input ng-model="user.address2" placeholder="Address 2">
10+
<md-input-container>
11+
<label>Email</label>
12+
<input ng-model="user.email" type="email">
4613
</md-input-container>
14+
</div>
15+
</md-content>
4716

48-
<div layout-gt-sm="row">
49-
<md-input-container class="md-block" flex-gt-sm>
50-
<label>City</label>
51-
<input ng-model="user.city">
17+
<md-content layout-padding>
18+
<div>
19+
<form name="userForm">
20+
21+
<div layout-gt-xs="row">
22+
<md-input-container class="md-block" flex-gt-xs>
23+
<label>Company (Disabled)</label>
24+
<input ng-model="user.company" disabled>
25+
</md-input-container>
26+
27+
<md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date">
28+
</md-datepicker>
29+
</div>
30+
31+
<div layout-gt-sm="row">
32+
<md-input-container class="md-block" flex-gt-sm>
33+
<label>First name</label>
34+
<input ng-model="user.firstName">
35+
</md-input-container>
36+
37+
<md-input-container class="md-block" flex-gt-sm>
38+
<label>Last Name</label>
39+
<input ng-model="theMax">
40+
</md-input-container>
41+
</div>
42+
43+
<md-input-container class="md-block">
44+
<label>Address</label>
45+
<input ng-model="user.address">
5246
</md-input-container>
5347

54-
<md-input-container class="md-block" flex-gt-sm>
55-
<label>State</label>
56-
<md-select ng-model="user.state">
57-
<md-option ng-repeat="state in states" value="{{state.abbrev}}">
58-
{{state.abbrev}}
59-
</md-option>
60-
</md-select>
48+
<md-input-container md-no-float class="md-block">
49+
<input ng-model="user.address2" placeholder="Address 2">
6150
</md-input-container>
6251

63-
<md-input-container class="md-block" flex-gt-sm>
64-
<label>Postal Code</label>
65-
<input name="postalCode" ng-model="user.postalCode" placeholder="12345"
66-
required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
67-
68-
<div ng-messages="userForm.postalCode.$error" role="alert" multiple>
69-
<div ng-message="required" class="my-message">You must supply a postal code.</div>
70-
<div ng-message="pattern" class="my-message">That doesn't look like a valid postal
71-
code.
52+
<div layout-gt-sm="row">
53+
<md-input-container class="md-block" flex-gt-sm>
54+
<label>City</label>
55+
<input ng-model="user.city">
56+
</md-input-container>
57+
58+
<md-input-container class="md-block" flex-gt-sm>
59+
<label>State</label>
60+
<md-select ng-model="user.state">
61+
<md-option ng-repeat="state in states" value="{{state.abbrev}}">
62+
{{state.abbrev}}
63+
</md-option>
64+
</md-select>
65+
</md-input-container>
66+
67+
<md-input-container class="md-block" flex-gt-sm>
68+
<label>Postal Code</label>
69+
<input name="postalCode" ng-model="user.postalCode" placeholder="12345"
70+
required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
71+
72+
<div ng-messages="userForm.postalCode.$error" role="alert" multiple>
73+
<div ng-message="required" class="my-message">You must supply a postal code.</div>
74+
<div ng-message="pattern" class="my-message">That doesn't look like a valid postal
75+
code.
76+
</div>
77+
<div ng-message="md-maxlength" class="my-message">
78+
Don't use the long version silly...we don't need to be that specific...
79+
</div>
7280
</div>
73-
<div ng-message="md-maxlength" class="my-message">
74-
Don't use the long version silly...we don't need to be that specific...
75-
</div>
76-
</div>
77-
</md-input-container>
78-
</div>
81+
</md-input-container>
82+
</div>
7983

80-
<md-input-container class="md-block">
81-
<label>Biography</label>
82-
<textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
83-
</md-input-container>
84+
<md-input-container class="md-block">
85+
<label>Biography</label>
86+
<textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
87+
</md-input-container>
8488

8589

86-
</form>
90+
</form>
91+
</div>
8792
</md-content>
8893

8994
</div>

‎src/components/input/demoIcons/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div ng-controller="DemoCtrl" layout="column" ng-cloak>
1+
<div ng-controller="DemoCtrl" layout="column" layout-padding ng-cloak>
22

33
<br/>
4-
<md-content layout-padding class="autoScroll">
4+
<md-content class="autoScroll">
55
<md-input-container class="md-icon-float md-block">
66
<!-- Use floating label instead of placeholder -->
77
<label>Name</label>

‎src/components/input/input.scss

+2-8
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,6 @@ md-input-container {
4343
min-width: 1px;
4444
}
4545

46-
// Move the element after the spacer (likely an ng-messages container), on top of the spacer
47-
.md-errors-spacer + * {
48-
margin-top: -$input-error-height;
49-
}
50-
5146
> md-icon {
5247
position: absolute;
5348
top: 5px;
@@ -113,8 +108,8 @@ md-input-container {
113108
order: 1;
114109
pointer-events: none;
115110
-webkit-font-smoothing: antialiased;
116-
@include rtl(padding-left, $input-container-padding, 0);
117-
@include rtl(padding-right, 0, $input-container-padding);
111+
@include rtl(padding-left, $input-container-padding + 1px, 0);
112+
@include rtl(padding-right, 0, $input-container-padding + 1px);
118113
z-index: 1;
119114
transform: translate3d(0, $input-label-default-offset + 4, 0) scale($input-label-default-scale);
120115
transition: transform $swift-ease-out-timing-function 0.25s;
@@ -208,7 +203,6 @@ md-input-container {
208203
position: relative;
209204
order: 4;
210205
overflow: hidden;
211-
min-height: $input-error-height;
212206
@include rtl(clear, left, right);
213207

214208
&.ng-enter {

0 commit comments

Comments
 (0)