This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
3040fd2
commit 5ca3170
Showing
3 changed files
with
81 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters