Implement floating labels for supported widgets (#23)

* Fixes #16 * Implement floating labels for supported widgets * Add docstrings * Update documentation
zostera · Mar 22, 2021 · e20d896 · e20d896
1 parent d0ff45b
commit e20d896
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 186 deletions.
diff --git a/docs/forms.rst b/docs/forms.rst
@@ -49,3 +49,14 @@ Bootstrap 5 offers Input groups to combine fields and add-ons (both before and a
 
 Note: input-group needs has-validation
 https://github.com/twbs/bootstrap/blob/6b3254536bac263c39e3a536c3c13945210d91b2/site/content/docs/5.0/migration.md
+
+Floating labels
+---------------
+
+Reference: https://getbootstrap.com/docs/5.0/forms/floating-labels/
+
+This behavior can be triggere dby setting `layout="floating"`.
+
+Floating labels are supported for widgets that can use `form-control`. An exception is `FileInput` and its descendants, those labels cannot be floating.
+
+Setting `layout="floating"` has no effect on widgets that are not supported.
diff --git a/example/templates/app/base.html b/example/templates/app/base.html
@@ -6,17 +6,17 @@
     <div class="container">
         <h1>{% block title %}(no title){% endblock %}</h1>
 
-        <p>
-            <a href="{% url 'home' %}">home</a>
-            <a href="{% url 'formset_default' %}">formset</a>
-            <a href="{% url 'form_default' %}">form</a>
-            <a href="{% url 'form_by_field' %}">form_by_field</a>
-            <a href="{% url 'form_horizontal' %}">form_horizontal</a>
-            <a href="{% url 'form_inline' %}">form_inline</a>
-            <a href="{% url 'form_with_files' %}">form_with_files</a>
-            <a href="{% url 'pagination' %}">pagination</a>
-            <a href="{% url 'misc' %}">miscellaneous</a>
-        </p>
+        <ul class="nav nav-pills">
+            <li class="nav-item"><a class="nav-link" href="{% url 'home' %}">home</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'formset_default' %}">formset</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'form_default' %}">form</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'form_by_field' %}">form_by_field</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'form_horizontal' %}">form_horizontal</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'form_inline' %}">form_inline</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'form_with_files' %}">form_with_files</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'pagination' %}">pagination</a></li>
+            <li class="nav-item"><a class="nav-link" href="{% url 'misc' %}">miscellaneous</a></li>
+        </ul>
 
         {% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
 

diff --git a/example/templates/app/form.html b/example/templates/app/form.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <form role="form" method="post">
+    <form method="post">
         {% csrf_token %}
         {% bootstrap_form form %}
         {% buttons submit='OK' reset="Cancel" %}{% endbuttons %}

diff --git a/example/templates/app/form_with_files.html b/example/templates/app/form_with_files.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <form role="form" method="post" enctype="multipart/form-data" {% if layout != 'vertical' %}class="form-{{ layout }}"{% endif %}>
+    <form method="post" enctype="multipart/form-data">
         {% csrf_token %}
         {% bootstrap_form form layout=layout %}
         {% buttons submit='OK' reset="Cancel" %}{% endbuttons %}