File field Bootstrap4: avoids long file names overflowing outside the… (

#1032)

* File field Bootstrap4: avoids long file names overflowing outside the label

* Using h-auto to prevent vertical overflow, and text-break to prevent horizontal overflow

* Fixing text-break. cf twbs/bootstrap#30803

* Using text-truncate to prevent long file name overflow

* refactor test to follow field_file.html evolution

* compliance with Black

* fixing regression, checkbox must float right

partial rollback of 8aaed1b

Co-authored-by: Bryan Brancotte <bryan.brancotte@pasteur.fr>

crispy_forms/templates/bootstrap4/layout/field_file.html

@@ -7,8 +7,8 @@
     <div class="input-group-prepend">
         <span class="input-group-text">{{ widget.data.initial_text }}</span>
     </div>
-    <div class="form-control d-flex">
-        <span style="flex-grow: 1;">
+    <div class="form-control d-flex h-auto">
+        <span class="text-break" style="flex-grow:1;min-width:0">
         <a href="{{ field.value.url }}">{{ field.value }}</a>
         </span>
         {% if not widget.data.required %}
@@ -28,7 +28,7 @@
 {% endif %}
     <div class="form-control custom-file{% if field.errors %} is-invalid{%endif%}" style="border:0">
         <input type="{{ widget.data.type }}" name="{{ widget.data.name }}" class="custom-file-input{% if field.errors %} is-invalid{%endif%}" {% if field.field.disabled %}disabled{% endif %} {% for name, value in field.field.widget.attrs.items %}{% if value is not False %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
-        <label class="custom-file-label" for="{{ field.id_for_label }}">---</label>
+        <label class="custom-file-label text-truncate" for="{{ field.id_for_label }}">---</label>
         <script type="text/javascript" id="script-{{ field.id_for_label }}">        
             document.getElementById("script-{{ field.id_for_label }}").parentNode.querySelector('.custom-file-input').onchange =  function (e){
                 var filenames = "";

crispy_forms/tests/test_layout.py

@@ -618,14 +618,13 @@ def test_file_field():
     form.helper.use_custom_control = True
     form.helper.layout = Layout("file_field")
     html = render_crispy_form(form)
-    assert (
-        '<div class="form-control custom-file" style="border:0"> <input type="file" name="file_field" '
-        'class="custom-file-input"  > <label class="custom-file-label" for="id_file_field">---</label>' in html
-    )
+    assert '<div class="form-control custom-file"' in html
+    assert '<input type="file" name="file_field" class="custom-file-input"' in html
+    assert '<label class="custom-file-label' in html
+    assert 'for="id_file_field">---</label>' in html
 
     form.helper.use_custom_control = False
     html = render_crispy_form(form)
-    assert (
-        '<div class="form-control custom-file" style="border:0"> <input type="file" name="file_field" '
-        'class="custom-file-input"  > <label class="custom-file-label" for="id_file_field">---</label>' not in html
-    )
+    assert "custom-file" not in html
+    assert "custom-file-input" not in html
+    assert "custom-file-label" not in html