[Django] #34383: Layout error in Admin when using help_text

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio | Owner: nobody
Candido Nazareth junior |
Type: Bug | Status: new
Component: Template | Version: 4.2
system |
Severity: Normal | Keywords: help_text
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
-------------------------------------+-------------------------------------
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.
[[Image(1)]]

--
Ticket URL: <https://code.djangoproject.com/ticket/34383>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------

Reporter: Antonio Candido | Owner: nobody

Nazareth junior |
Type: Bug | Status: new

Component: Template system | Version: 4.2
Severity: Normal | Resolution:
Keywords: help_text | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antonio Candido Nazareth junior):

* Attachment "4.2b1.png" added.

Print erro on Django Version 4.2b1

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: nobody
Nazareth junior |
Type: Bug | Status: new
Component: Template system | Version: 4.2
Severity: Normal | Resolution:
Keywords: help_text | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Antonio Candido Nazareth junior):

* Attachment "4.1.7.png" added.

Print on Django Version 4.1.5 its ok

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: nobody
Nazareth junior |
Type: Bug | Status: new
Component: Template system | Version: 4.2
Severity: Normal | Resolution:
Keywords: help_text | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Description changed by Antonio Candido Nazareth junior:

Old description:

> 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.
> [[Image(1)]]

New description:

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.

[[Image(https://code.djangoproject.com/attachment/ticket/34383/4.2b1.png)]]

--

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:1>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: nobody
Nazareth junior |

Type: Bug | Status: closed

Component: Template system | Version: 4.2

Severity: Normal | Resolution: needsinfo

Keywords: help_text | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Mariusz Felisiak):

* status: new => closed
* resolution: => needsinfo

Comment:

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.

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:2>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: nobody
Nazareth junior |
Type: Bug | Status: closed
Component: Template system | Version: 4.2
Severity: Normal | Resolution: needsinfo
Keywords: help_text | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antonio Candido Nazareth junior):

* Attachment "bug.jpg" added.

Error breaking line with two or more columns with help_text

--
Ticket URL: <https://code.djangoproject.com/ticket/34383>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: nobody
Nazareth junior |

Type: Bug | Status: new

Component: Template system | Version: 4.2
Severity: Normal | Resolution:

Keywords: help_text | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Antonio Candido Nazareth junior):

* status: closed => new
* resolution: needsinfo =>

Comment:

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

[[Image(https://code.djangoproject.com/attachment/ticket/34383/bug.jpg)]]
works on django version 4.1.7

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:3>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: nobody
Nazareth junior |
Type: Bug | Status: new
Component: Template system | Version: 4.2

Severity: Release blocker | Resolution:
Keywords: help_text | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Mariusz Felisiak):

* cc: Tom Carrick (added)
* severity: Normal => Release blocker
* stage: Unreviewed => Accepted

Comment:

Thanks for details!

Regression in 96a598356a9ea8c2c05b22cadc12e256a3b295fd.

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:4>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: nobody
Nazareth junior |
Type: Bug | Status: new
Component: Template system | Version: 4.2
Severity: Release blocker | Resolution:
Keywords: help_text | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by 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:
{{{#!diff
diff --git a/django/contrib/admin/static/admin/css/forms.css
b/django/contrib/admin/static/admin/css/forms.css
index 3cd87ef476..e73831a83f 100644
--- a/django/contrib/admin/static/admin/css/forms.css
+++ b/django/contrib/admin/static/admin/css/forms.css
@@ -72,7 +72,7 @@ form ul.inline li {
/* ALIGNED FIELDSETS */

.aligned label {
- display: block;
+ display: inline-block;
padding: 4px 10px 0 0;
width: 160px;
word-wrap: break-word;
@@ -114,7 +114,7 @@ form ul.inline li {
}

form .aligned ul {
- margin-left: 160px;
+ margin-left: 166px;
padding-left: 10px;
}

@@ -127,7 +127,7 @@ form .aligned div.radiolist {
form .aligned p.help,
form .aligned div.help {
margin-top: 0;
- margin-left: 160px;
+ margin-left: 166px;
padding-left: 10px;
}

@@ -191,7 +191,6 @@ form .aligned table p {
}

fieldset .fieldBox {
- float: left;
margin-right: 20px;
}

diff --git a/django/contrib/admin/static/admin/css/widgets.css
b/django/contrib/admin/static/admin/css/widgets.css
index 572dc0a500..c81bcf654d 100644
--- a/django/contrib/admin/static/admin/css/widgets.css
+++ b/django/contrib/admin/static/admin/css/widgets.css
@@ -578,7 +578,6 @@ ul.timelist, .timelist li {

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

diff --git a/django/contrib/admin/templates/admin/includes/fieldset.html
b/django/contrib/admin/templates/admin/includes/fieldset.html
index 5953a5ad3d..0d398d1de1 100644
--- a/django/contrib/admin/templates/admin/includes/fieldset.html
+++ b/django/contrib/admin/templates/admin/includes/fieldset.html
@@ -6,26 +6,30 @@
{% 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>
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:5>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------

Reporter: Antonio Candido | Owner: Tom
Nazareth junior | Carrick
Type: Bug | Status: assigned

Component: Template system | Version: 4.2
Severity: Release blocker | Resolution:
Keywords: help_text | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Tom Carrick):

* owner: nobody => Tom Carrick
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:6>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: Tom
Nazareth junior | Carrick
Type: Bug | Status: assigned
Component: Template system | Version: 4.2
Severity: Release blocker | Resolution:

Keywords: help_text | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Mariusz Felisiak):

* has_patch: 0 => 1
* stage: Accepted => Ready for checkin

Comment:

[https://github.com/django/django/pull/16678 PR]

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:7>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: Tom
Nazareth junior | Carrick

Type: Bug | Status: closed

Component: Template system | Version: 4.2

Severity: Release blocker | Resolution: fixed

Keywords: help_text | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Mariusz Felisiak <felisiak.mariusz@…>):

* status: assigned => closed
* resolution: => fixed

Comment:

In [changeset:"788f7b8100dbef050129bf5c1e0af47e7bc89b28" 788f7b81]:
{{{
#!CommitTicketReference repository=""
revision="788f7b8100dbef050129bf5c1e0af47e7bc89b28"
[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...@gmail.com>

Backport of d687febce5868545f99974d2499a91f81a32fef5 from main
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:9>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: Tom
Nazareth junior | Carrick
Type: Bug | Status: closed
Component: Template system | Version: 4.2
Severity: Release blocker | Resolution: fixed
Keywords: help_text | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak <felisiak.mariusz@…>):

* status: assigned => closed
* resolution: => fixed

Comment:

In [changeset:"d687febce5868545f99974d2499a91f81a32fef5" d687febc]:
{{{
#!CommitTicketReference repository=""
revision="d687febce5868545f99974d2499a91f81a32fef5"

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...@gmail.com>
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:8>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: Tom
Nazareth junior | Carrick
Type: Bug | Status: closed
Component: Template system | Version: 4.2
Severity: Release blocker | Resolution: fixed
Keywords: help_text | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by GitHub <noreply@…>):

In [changeset:"b347dc63d5468564cbb7050461565f4f89032664" b347dc6]:
{{{
#!CommitTicketReference repository=""
revision="b347dc63d5468564cbb7050461565f4f89032664"
Refs #34383 -- Corrected margins in admin fieldsets with multiple fields
on the same line on small screens.

Regression in d687febce5868545f99974d2499a91f81a32fef5.
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:10>

[Django]

#34383: Layout error in Admin when using help_text
-------------------------------------+-------------------------------------
Reporter: Antonio Candido | Owner: Tom
Nazareth junior | Carrick
Type: Bug | Status: closed
Component: Template system | Version: 4.2
Severity: Release blocker | Resolution: fixed
Keywords: help_text | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Mariusz Felisiak <felisiak.mariusz@…>):

In [changeset:"47530bfb200c9e736361c0c200b5af2013255f64" 47530bf]:
{{{
#!CommitTicketReference repository=""
revision="47530bfb200c9e736361c0c200b5af2013255f64"
[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
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34383#comment:11>