[Django] #35556: The checkbox of a BooleanField is displayed before field's name

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name
-------------------------------------+-------------------------------------
Reporter: Omid | Owner: nobody
Shojaee |
Type: Bug | Status: new
Component: Forms | Version: 5.0
Severity: Normal | Keywords: BooleanField, Admin
Triage Stage: | Site
Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
I have a BooleanField defined like this:


{{{#!python
featured = models.BooleanField(verbose_name=_('featured'), default=False)
}}}


In the Admin site, I see the checkmark before the field name (screenshot
is attached).

My site's language is Farsi, but I switched it to English and got the same
thing.

I defined a BooleanField in another model, and again got the same thing.

I check the page in the Developer Tools and this is what I see:

{{{
<input type="checkbox" name="test_field" id="id_test_field">
<label class="vCheckboxLabel" for="id_test_field">Test field</label>
}}}

As far as I understand, this is wrong. The label element should be before
input element not after it.

Django version: 5.0.6
OS: Ubuntu 22.0.4
--
Ticket URL: <https://code.djangoproject.com/ticket/35556>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name
-------------------------------------+-------------------------------------

Reporter: Omid Shojaee | Owner: nobody

Type: Bug | Status: new
Component: Forms | Version: 5.0

Severity: Normal | Resolution:

Keywords: BooleanField, Admin | Triage Stage:
Site | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Omid Shojaee):

* Attachment "Screenshot 2024-06-24 211617.png" added.

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name

-------------------------------+--------------------------------------

Reporter: Omid Shojaee | Owner: nobody

Type: Bug | Status: closed
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution: needsinfo
Keywords: checkbox | Triage Stage: Unreviewed

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

-------------------------------+--------------------------------------
Changes (by Natalia Bidart):

* component: Forms => contrib.admin
* keywords: BooleanField, Admin Site => checkbox
* resolution: => needsinfo
* status: new => closed

Comment:

Hello Omid Shojaee, thank you for your report.

From the screenshot attached, it appears that the checkbox is positioned
to the right of the label. To help us understand and address this, could
you please provide the following details:
* A larger screenshot showing the entire page to better grasp the context.
* The complete model definition where the issue occurs.
* If applicable, include any relevant views and forms that might be
contributing to this behavior.
* Could you describe the expected placement of the checkbox using terms
like "left" or "right" to avoid any misunderstandings?

To better understand your concern about the "this is wrong" sentence,
could you please provide additional information or references that explain
the issue in more detail?

I'll close the ticket accordingly but please let me know when the
information above is provided.
--
Ticket URL: <https://code.djangoproject.com/ticket/35556#comment:1>

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name
-------------------------------+--------------------------------------
Reporter: Omid Shojaee | Owner: nobody
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution: needsinfo
Keywords: checkbox | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Changes (by Omid Shojaee):

* Attachment "Screenshot 2024-06-24 224948.png" added.

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

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name
-------------------------------+--------------------------------------
Reporter: Omid Shojaee | Owner: nobody
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution: needsinfo
Keywords: checkbox | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Comment (by Omid Shojaee):

This is the model definition:

{{{
class Product(models.Model):
name = models.CharField(max_length=255, verbose_name=_('product
name'))
slug = models.SlugField(
max_length=255, unique=True, allow_unicode=True,
verbose_name=_('product slug')
)
brand = models.ForeignKey(
Brand,
on_delete=models.CASCADE,
related_name='products',
verbose_name=_('product brand'),
)
category = models.ForeignKey(
Category,
on_delete=models.CASCADE,
related_name='products',
verbose_name=_('product category'),
)
image = FileBrowseField(
max_length=255,
directory='products/',
extensions=['.jpg', '.jpeg', '.png'],
verbose_name=_('product image'),
)
quantity = models.PositiveIntegerField(
verbose_name=_('product quantity'), default=0
)
price = models.PositiveIntegerField(verbose_name=_('product price'),
default=0)

featured = models.BooleanField(verbose_name=_('featured'),
default=False)

class Meta:
verbose_name = _('product')
verbose_name_plural = _('products')

def __str__(self):
return self.name

}}}

Looking at the second screenshot I attached, all fields are like this:

From left to right: Field name and then input box

Except for the boolean field, where the checkbox is to the left of the
field name.
--
Ticket URL: <https://code.djangoproject.com/ticket/35556#comment:2>

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name
-------------------------------+--------------------------------------
Reporter: Omid Shojaee | Owner: nobody
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.0

Severity: Normal | Resolution: duplicate

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

Changes (by Natalia Bidart):

* resolution: needsinfo => duplicate

Comment:

Replying to [comment:2 Omid Shojaee]:

>
> From left to right: Field name and then input box
>
> Except for the boolean field, where the checkbox is to the left of the
field name.

Thank you for the extra details, I now understand your report and I see
this is a duplicate of #28521.

The placement of the checkboxes (so they are to the right of a label) has
been like this for ever. Any change in this area should be proposed,
discussed, and agreed with the Django Community using the
[https://forum.djangoproject.com/c/internals/5 Django Forum].
--
Ticket URL: <https://code.djangoproject.com/ticket/35556#comment:3>

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name
-------------------------------+--------------------------------------
Reporter: Omid Shojaee | Owner: nobody
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution: duplicate
Keywords: checkbox | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Changes (by Omid Shojaee):

* Attachment "Screenshot 2024-06-25 095603.png" added.

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

[Django]

#35556: The checkbox of a BooleanField is displayed before field's name
-------------------------------+--------------------------------------
Reporter: Omid Shojaee | Owner: nobody
Type: Bug | Status: closed
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution: duplicate
Keywords: checkbox | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Comment (by Omid Shojaee):

My third screenshot shows some of most common model fields.

I think someone from UI team should explain why Boolean field is different
from the rest of the crowd.
--
Ticket URL: <https://code.djangoproject.com/ticket/35556#comment:4>