Make float labels work with different mark-up and check inputs on load.

dpgmediamagazines · Aug 17, 2017 · ccce417 · ccce417
1 parent eb6062e
commit ccce417
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/arctic/static/arctic/src/assets/js/app.js b/arctic/static/arctic/src/assets/js/app.js
@@ -16,6 +16,14 @@ $(document).ready(function() {
     // Stepper input
     var $stepperInput = $('.stepper-input input');
 
+    // Check if flaot label input has items, if so then add some CSS
+    if ( $('.float-label .selectize-input').find('.item').length > 0 ) {
+        $('.selectize-input').parent().next('label').css({
+            top: '.3rem',
+            fontSize: '75%'
+        });
+    };
+
     function incrementStepperInput(amount) {
         $stepperInput.val((parseInt($stepperInput.val()) || 0) + amount);
     }

diff --git a/arctic/static/arctic/src/assets/scss/partials/_float-label.scss b/arctic/static/arctic/src/assets/scss/partials/_float-label.scss
@@ -62,7 +62,8 @@
         }
     }
 
-    .styled-select label {
+    .styled-select label,
+    .styled-select + label {
         top: .3rem;
         font-size: 75%;
     }

diff --git a/arctic/templates/arctic/index.html b/arctic/templates/arctic/index.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <h4 id="form" data-magellan-target="form">Form with validation</h4>
-    <form class="content-block__flex-wrap" data-abide novalidate>
+    <form class="content-block__flex-wrap float-label" data-abide novalidate>
         <fieldset type="get">
             <div data-abide-error class="alert callout" style="display: none;">
                 <p><i class="fi-alert"></i> There are some errors in your form.</p>

diff --git a/example/articles/views.py b/example/articles/views.py
@@ -52,6 +52,7 @@ def get_category_field(self, row):
 
 
 class ArticleUpdateView(UpdateView):
+    form_display = 'float-label'
     page_title = _("Edit Article")
     permission_required = "change_article"
     model = Article