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

Commit

Permalink
fix(input): Remove unneccessary CSS error margin.
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@topherfangio @jelbourn
topherfangio authored and jelbourn committed Dec 10, 2015
1 parent 3040fd2 commit 5ca3170
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 82 deletions.
149 changes: 77 additions & 72 deletions src/components/input/demoBasicUsage/index.html
View file
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
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
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

0 comments on commit 5ca3170

Please sign in to comment.