Layout error in Admin when using help_text

[Antonio Candido Nazareth junior]

I'm using Django 4.2b1 and found a problem with the Django admin layout when I use the help_text in model admin. The help_text in the Admin form appears on a separate line and breaks the alignment of the fields. This happens in every browser I've tested.

Create a model with two or more fields that have help_text defined with a size larger than the field name. Register this model in admin.py with ModelAdmin and put them on the same line using fieldsets giving name to the line. Access the edit page of this model in Django admin and observe the layout.
Expected result:

The help_text should appear below the corresponding field, without affecting the alignment of the other fields.

[Antonio Candido Nazareth junior]

Print erro on Django Version 4.2b1

[Antonio Candido Nazareth junior]

Print on Django Version 4.1.5 its ok

[Mariusz Felisiak]

Hi, I don't think you've explained the issue in enough detail to confirm a bug in Django. Do you have any custom templates? Please reopen the ticket if you can debug your issue and provide a sample minimal project that reproduces it.

[Antonio Candido Nazareth junior]

Error breaking line with two or more columns with help_text

[Antonio Candido Nazareth junior]

Steps to reproduce the error:
Create model new:

app.new.models.py

from django.db import models

class Favi(models.Model):
    faviNumero = models.CharField(max_length=20,help_text='Data incluindo o Horário do término da viagem')    
    matricula1 = models.CharField(max_length=50,help_text='Data incluindo o Horário do término da viagem')    
    matricula3 = models.CharField(max_length=50,help_text='Data incluindo o Horário do término da viagem')    
    matricula2 = models.CharField(max_length=50,help_text='Data incluindo o Horário do término da viagem')    
    matricula = models.CharField(max_length=50,help_text='Data incluindo o Horário do término da viagem')    
    objetivo = models.TextField(verbose_name='Objetivo', help_text='DESCRIÇÃO OBJETIVA DO SERVIÇO A SER EXECUTADO')
    
    periodoInicio = models.DateTimeField(verbose_name='Início',help_text='Data incluindo o Horário de início da viagem')
    periodoTermino = models.DateTimeField(verbose_name='Término',help_text='Data incluindo o Horário do término da viagem')

app.new.admin.py

from django.contrib import admin
from new.models import Favi

# Register your models here.
class FilterFaviAdmin(admin.ModelAdmin):
    fieldsets = [
    (None,                  {'fields':[('faviNumero','matricula1','matricula3'),'objetivo',('periodoInicio','periodoTermino'),('matricula2','matricula',),]}),    
    ]
admin.site.register(Favi,FilterFaviAdmin)

Result appears broken layout with help text as image below installed django pre version 4.2b1

works on django version 4.1.7

[Mariusz Felisiak]

Thanks for details!

Regression in 96a598356a9ea8c2c05b22cadc12e256a3b295fd.

[Mariusz Felisiak]

I tried to fix this, it's much better (but not perfect, you can see minor issues on the "Change user" view) with the following diff:

django/contrib/admin/static/admin/css/forms.css

@@ -72 +72 @@
 /* ALIGNED FIELDSETS */
 
 .aligned label {
-    display: block;
+    display: inline-block;
     padding: 4px 10px 0 0;
     width: 160px;
     word-wrap: break-word;
@@ -114 +114 @@
 }
 
 form .aligned ul {
-    margin-left: 160px;
+    margin-left: 166px;
     padding-left: 10px;
 }
 
@@ -127 +127 @@
 form .aligned p.help,
 form .aligned div.help {
     margin-top: 0;
-    margin-left: 160px;
+    margin-left: 166px;
     padding-left: 10px;
 }
 
@@ -191 +191 @@
 }
 
 fieldset .fieldBox {
-    float: left;
     margin-right: 20px;
 }
 

django/contrib/admin/static/admin/css/widgets.css

@@ -578 +578 @@
 
 /* RELATED WIDGET WRAPPER */
 .related-widget-wrapper {
-    float: left;       /* display properly in form rows with multiple fields */
     overflow: hidden;  /* clear floated contents */
 }
 

django/contrib/admin/templates/admin/includes/fieldset.html

@@ -6 +6 @@
     {% for line in fieldset %}
         <div class="form-row{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
             {% if line.fields|length == 1 %}{{ line.errors }}{% endif %}
-            {% for field in line %}
-                <div{% if not line.fields|length == 1 %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
-                    {% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
-                    {% if field.is_checkbox %}
-                        {{ field.field }}{{ field.label_tag }}
-                    {% else %}
-                        {{ field.label_tag }}
-                        {% if field.is_readonly %}
-                            <div class="readonly">{{ field.contents }}</div>
-                        {% else %}
-                            {{ field.field }}
-                        {% endif %}
-                    {% endif %}
-                </div>
-                {% if field.field.help_text %}
-                    <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
-                        <div>{{ field.field.help_text|safe }}</div>
-                    </div>
-                {% endif %}
-            {% endfor %}
+            <div>
+              {% for field in line %}
+                <div>
+                  <div{% if not line.fields|length == 1 %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
+                      {% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
+                      {% if field.is_checkbox %}
+                          {{ field.field }}{{ field.label_tag }}
+                      {% else %}
+                          {{ field.label_tag }}
+                          {% if field.is_readonly %}
+                              <div class="readonly">{{ field.contents }}</div>
+                          {% else %}
+                              {{ field.field }}
+                          {% endif %}
+                      {% endif %}
+                  </div>
+                  {% if field.field.help_text %}
+                      <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
+                          <div>{{ field.field.help_text|safe }}</div>
+                      </div>
+                  {% endif %}
+                  </div>
+              {% endfor %}
+            </div>
         </div>
     {% endfor %}
 </fieldset>

[Mariusz Felisiak]

​PR

[Mariusz Felisiak <felisiak.mariusz@…>]

In d687febc:

Fixed #34383 -- Fixed layout of admin fieldsets with multiple fields on the same line.

Thanks Antonio Candido Nazareth junior for the report.

Regression in 96a598356a9ea8c2c05b22cadc12e256a3b295fd.

Co-authored-by: Mariusz Felisiak <felisiak.mariusz@…>

[Mariusz Felisiak <felisiak.mariusz@…>]

In 788f7b81:

[4.2.x] Fixed #34383 -- Fixed layout of admin fieldsets with multiple fields on the same line.

Thanks Antonio Candido Nazareth junior for the report.

Regression in 96a598356a9ea8c2c05b22cadc12e256a3b295fd.

Co-authored-by: Mariusz Felisiak <felisiak.mariusz@…>

Backport of d687febce5868545f99974d2499a91f81a32fef5 from main

[GitHub <noreply@…>]

In b347dc6:

Refs #34383 -- Corrected margins in admin fieldsets with multiple fields on the same line on small screens.

Regression in d687febce5868545f99974d2499a91f81a32fef5.

[Mariusz Felisiak <felisiak.mariusz@…>]

In 47530bf:

[4.2.x] Refs #34383 -- Corrected margins in admin fieldsets with multiple fields on the same line on small screens.

Regression in d687febce5868545f99974d2499a91f81a32fef5.
Backport of b347dc63d5468564cbb7050461565f4f89032664 from main