text-wrap the placeholder for multi-line text inputs

SumOfUs · Dec 2, 2016 · 4437ee4 · 4437ee4
1 parent 7de4857
commit 4437ee4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/app/assets/stylesheets/member-facing/form.scss b/app/assets/stylesheets/member-facing/form.scss
@@ -150,11 +150,15 @@ label.checkbox-label {
     -webkit-user-select: none;
     font-size: 18px;
     line-height: 28px;
-    white-space: nowrap;
     max-width: calc(100% - 50px);
     overflow: hidden;
+    white-space: nowrap;
+    &--multiline {
+      white-space: normal;
+    }
     &--active {
       color: $teal;
+      white-space: nowrap;
     }
     &--full {
       color: rgba(black, 0.6);

diff --git a/app/liquid/views/partials/_form.liquid b/app/liquid/views/partials/_form.liquid
@@ -17,7 +17,7 @@
           <input type="hidden" name="{{field.name}}" class="form__content" id="" placeholder="{{ field.label }}" value="{{ field.default_value }}" />
         {% when 'paragraph' %}
           <div class="sweet-placeholder">
-            <label class="sweet-placeholder__label">{{ field.label }}</label>
+            <label class="sweet-placeholder__label sweet-placeholder__label--multiline">{{ field.label }}</label>
             <textarea name="{{ field.name }}" class="form__content sweet-placeholder__field" id="" maxlength="9999">{{ field.default_value }}</textarea>
           </div>
         {% when 'email' %}