diff --git a/jade/page-contents/text_inputs_content.html b/jade/page-contents/text_inputs_content.html
index c94b923157..5e3f8d670a 100644
--- a/jade/page-contents/text_inputs_content.html
+++ b/jade/page-contents/text_inputs_content.html
@@ -161,6 +161,45 @@
Icon Prefixes
+ Icon Suffixes
+ You can also add an icon suffix. Just add an icon with the class suffix
before the input and label.
+
+
+
+ <div class="row">
+ <form class="col s12">
+ <div class="row">
+ <div class="input-field col s6">
+ <i class="material-icons suffix">account_circle</i>
+ <input id="icon_suffix" type="text" class="validate">
+ <label for="icon_suffix">First Name</label>
+ </div>
+ <div class="input-field col s6">
+ <i class="material-icons suffix">phone</i>
+ <input id="icon_telephone_suffix" type="tel" class="validate">
+ <label for="icon_telephone_suffix">Telephone</label>
+ </div>
+ </div>
+ </form>
+ </div>
+
+
+
Custom Error or Success Messages
You can add custom validation messages by adding either data-error
or data-success
attributes to your helper text element.
diff --git a/sass/components/_chips.scss b/sass/components/_chips.scss
index bad257e550..330519bd7f 100644
--- a/sass/components/_chips.scss
+++ b/sass/components/_chips.scss
@@ -84,6 +84,12 @@
width: 92%;
width: calc(100% - 3rem);
}
+// Form suffix
+.suffix ~ .chips {
+ margin-right: 3rem;
+ width: 92%;
+ width: calc(100% - 3rem);
+}
.chips:empty ~ label {
font-size: 0.8rem;
transform: translateY(-140%);
diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss
index b44c7b7f01..9f9bcc5bbd 100644
--- a/sass/components/forms/_input-fields.scss
+++ b/sass/components/forms/_input-fields.scss
@@ -166,7 +166,9 @@ textarea.materialize-textarea {
}
.prefix ~ label,
- .prefix ~ .validate ~ label {
+ .prefix ~ .validate ~ label,
+ .suffix ~ label,
+ .suffix ~ .validate ~ label {
width: calc(100% - 3rem - #{$gutter-width});
}
}
@@ -217,7 +219,7 @@ textarea.materialize-textarea {
}
// Prefix Icons
- .prefix {
+ .prefix, .suffix {
position: absolute;
width: $input-height;
font-size: $input-icon-size;
@@ -229,6 +231,7 @@ textarea.materialize-textarea {
.prefix ~ input,
.prefix ~ textarea,
+ .prefix ~ .select-wrapper,
.prefix ~ label,
.prefix ~ .validate ~ label,
.prefix ~ .helper-text,
@@ -241,21 +244,43 @@ textarea.materialize-textarea {
.prefix ~ label { margin-left: 3rem; }
@media #{$medium-and-down} {
- .prefix ~ input {
+ .prefix ~ input,
+ .suffix ~ input {
width: 86%;
width: calc(100% - 3rem);
}
}
@media #{$small-and-down} {
- .prefix ~ input {
+ .prefix ~ input,
+ .suffix ~ input {
width: 80%;
width: calc(100% - 3rem);
}
}
-}
+ // Suffix Icons
+ .suffix {
+ right: 0;
+ }
+
+ .suffix ~ input,
+ .suffix ~ textarea,
+ .suffix ~ .select-wrapper,
+ .suffix ~ label,
+ .suffix ~ .validate ~ label,
+ .suffix ~ .helper-text,
+ .suffix ~ .autocomplete-content {
+ margin-right: 3rem;
+ width: 92%;
+ width: calc(100% - 3rem);
+ }
+
+ .suffix ~ label { margin-right: 3rem; }
+
+}
+
/* Search Field */
.input-field input[type=search] {
diff --git a/sass/components/forms/_select.scss b/sass/components/forms/_select.scss
index c3ab15c7e7..9fb72db026 100644
--- a/sass/components/forms/_select.scss
+++ b/sass/components/forms/_select.scss
@@ -162,6 +162,15 @@ body.keyboard-focused {
.prefix ~ label { margin-left: 3rem; }
+// Suffix Icons
+.suffix ~ .select-wrapper {
+ margin-right: 3rem;
+ width: 92%;
+ width: calc(100% - 3rem);
+}
+
+.suffix ~ label { margin-right: 3rem; }
+
// Icons
.select-dropdown li {
img {