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

fix(input): Remove unnecessary CSS error margin. #6235

Closed
wants to merge 1 commit into from
Closed

fix(input): Remove unnecessary CSS error margin. #6235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 77 additions & 72 deletions src/components/input/demoBasicUsage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,94 @@
<div ng-controller="DemoCtrl" layout="column" ng-cloak class="md-inline-form">

<md-content md-theme="docs-dark" layout-padding layout-gt-sm="row">
<md-input-container>
<label>Title</label>
<input ng-model="user.title">
</md-input-container>

<md-input-container>
<label>Email</label>
<input ng-model="user.email" type="email">
</md-input-container>
</md-content>

<md-content layout-padding>
<form name="userForm">

<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Company (Disabled)</label>
<input ng-model="user.company" disabled>
</md-input-container>

<md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date"></md-datepicker>
</div>

<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>First name</label>
<input ng-model="user.firstName">
</md-input-container>

<md-input-container class="md-block" flex-gt-sm>
<label>Last Name</label>
<input ng-model="theMax">
</md-input-container>
</div>

<md-input-container class="md-block">
<label>Address</label>
<input ng-model="user.address">
<md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
<div>
<md-input-container>
<label>Title</label>
<input ng-model="user.title">
</md-input-container>

<md-input-container md-no-float class="md-block">
<input ng-model="user.address2" placeholder="Address 2">
<md-input-container>
<label>Email</label>
<input ng-model="user.email" type="email">
</md-input-container>
</div>
</md-content>

<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>City</label>
<input ng-model="user.city">
<md-content layout-padding>
<div>
<form name="userForm">

<div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-xs>
<label>Company (Disabled)</label>
<input ng-model="user.company" disabled>
</md-input-container>

<md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date">
</md-datepicker>
</div>

<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>First name</label>
<input ng-model="user.firstName">
</md-input-container>

<md-input-container class="md-block" flex-gt-sm>
<label>Last Name</label>
<input ng-model="theMax">
</md-input-container>
</div>

<md-input-container class="md-block">
<label>Address</label>
<input ng-model="user.address">
</md-input-container>

<md-input-container class="md-block" flex-gt-sm>
<label>State</label>
<md-select ng-model="user.state">
<md-option ng-repeat="state in states" value="{{state.abbrev}}">
{{state.abbrev}}
</md-option>
</md-select>
<md-input-container md-no-float class="md-block">
<input ng-model="user.address2" placeholder="Address 2">
</md-input-container>

<md-input-container class="md-block" flex-gt-sm>
<label>Postal Code</label>
<input name="postalCode" ng-model="user.postalCode" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">

<div ng-messages="userForm.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a postal code.</div>
<div ng-message="pattern" class="my-message">That doesn't look like a valid postal
code.
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>City</label>
<input ng-model="user.city">
</md-input-container>

<md-input-container class="md-block" flex-gt-sm>
<label>State</label>
<md-select ng-model="user.state">
<md-option ng-repeat="state in states" value="{{state.abbrev}}">
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>

<md-input-container class="md-block" flex-gt-sm>
<label>Postal Code</label>
<input name="postalCode" ng-model="user.postalCode" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">

<div ng-messages="userForm.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a postal code.</div>
<div ng-message="pattern" class="my-message">That doesn't look like a valid postal
code.
</div>
<div ng-message="md-maxlength" class="my-message">
Don't use the long version silly...we don't need to be that specific...
</div>
</div>
<div ng-message="md-maxlength" class="my-message">
Don't use the long version silly...we don't need to be that specific...
</div>
</div>
</md-input-container>
</div>
</md-input-container>
</div>

<md-input-container class="md-block">
<label>Biography</label>
<textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
</md-input-container>
<md-input-container class="md-block">
<label>Biography</label>
<textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
</md-input-container>


</form>
</form>
</div>
</md-content>

</div>
4 changes: 2 additions & 2 deletions src/components/input/demoIcons/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div ng-controller="DemoCtrl" layout="column" ng-cloak>
<div ng-controller="DemoCtrl" layout="column" layout-padding ng-cloak>

<br/>
<md-content layout-padding class="autoScroll">
<md-content class="autoScroll">
<md-input-container class="md-icon-float md-block">
<!-- Use floating label instead of placeholder -->
<label>Name</label>
Expand Down
10 changes: 2 additions & 8 deletions src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,6 @@ md-input-container {
min-width: 1px;
}

// Move the element after the spacer (likely an ng-messages container), on top of the spacer
.md-errors-spacer + * {
margin-top: -$input-error-height;
}

> md-icon {
position: absolute;
top: 5px;
Expand Down Expand Up @@ -113,8 +108,8 @@ md-input-container {
order: 1;
pointer-events: none;
-webkit-font-smoothing: antialiased;
@include rtl(padding-left, $input-container-padding, 0);
@include rtl(padding-right, 0, $input-container-padding);
@include rtl(padding-left, $input-container-padding + 1px, 0);
@include rtl(padding-right, 0, $input-container-padding + 1px);
z-index: 1;
transform: translate3d(0, $input-label-default-offset + 4, 0) scale($input-label-default-scale);
transition: transform $swift-ease-out-timing-function 0.25s;
Expand Down Expand Up @@ -208,7 +203,6 @@ md-input-container {
position: relative;
order: 4;
overflow: hidden;
min-height: $input-error-height;
@include rtl(clear, left, right);

&.ng-enter {
Expand Down