Re: [Django] #36336: Incorrect size of first autocomple in Inlines with "collapsed" class (on chromium based browsers?)
6 views
Skip to first unread message
Django
Apr 22, 2025, 1:08:59 PM4/22/25
to django-...@googlegroups.com
#36336: Incorrect size of first autocomple in Inlines with "collapsed" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Natalia Bidart):
* stage: Unreviewed => Accepted
Old description:
> This error occurs on versions after removing the "collapse.js" and moving
> to <details> and <summary> tags, mainly Django>=5.1 and in my opinion is
> purely JS/CSS related and Python independent. This happens using both
> `StackedInline` and `TabularInline`.
>
> Tested on Google Chrome (135.0.7049.96), Edge (135.0.3179.85), Brave
> (1.77.100), but with inconsistnt results, seems like the **problems is
> mainly on desktop**, but also on mobile devides most consistently when
> using desktop mode with sidebar open (I know how it sounds, but it might
> be caused by some element width checking).
> Sometimes it happens after refresh (1st gif) and sometimes from the start
> (2nd gif).
>
> I identified the problem is with `width: auto;` instead of e.g. `width:
> 260px;` on `<span class="select2 select2-container select2-container
> --admin-autocomplete">` set by `Select2.prototype._resolveWidth`.
> https://github.com/django/django/blob/1831f7733d3ef03d1ca7fac3e8d9f4c5e3e3375e/django/contrib/admin/static/admin/js/vendor/select2/select2.full.js#L5496
>
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> tickets/refs/heads/main/36336/2025-04-22%2000%2048%2015.gif)]]
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> tickets/refs/heads/main/36336/2025-04-22%2000%2051%2030.gif)]]
>
> I have successfully reproduces using Django 5.2 on Windows 11, on
> multiple browsers, on two separate devices, one with 2560x1440 and one
> with 1920x1080, in both windowed and fullscreen modes. I even tested
> hosting project on both Windows and Linux, no changes, but as mentioned
> above, it seems to be purely frontend related issue.
>
> After updating Firefox I am unable to reproduce, I do not know which
> version I used before, and at this point I am not sure whether there was
> a problem before, right now it seems it is only affecting chromium based
> browsers.
>
> No model instances have to be created, it doesn't matter whether user is
> editing existing object or adding a new one.
>
> Code:
> == models.py
> {{{#!python
> from django.db import models
>
> class Restaurant(models.Model):
> name = models.CharField(max_length=100)
> address = models.CharField(max_length=255)
>
> def __str__(self):
> return self.name
>
> class Order(models.Model):
> restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE)
> order_number = models.CharField(max_length=20)
> products = models.ManyToManyField("Product", related_name="orders")
>
> def __str__(self):
> return f"Order {self.pk} from {self.restaurant.name}"
>
> class Product(models.Model):
> name = models.CharField(max_length=100)
> price = models.DecimalField(max_digits=10, decimal_places=2)
>
> def __str__(self):
> return f"{self.name} - ${self.price}"
> }}}
>
> == admin.py
> {{{#!python
> from django.contrib import admin
>
> from .models import Restaurant, Order, Product
>
> class OrderInline(admin.StackedInline):
> model = Order
> extra = 3
>
> fields = ["order_number", "products"]
> autocomplete_fields = ["products"]
>
> classes = ["collapse"]
>
> @admin.register(Restaurant)
> class RestaurantAdmin(admin.ModelAdmin):
> list_display = ("name", "address")
> search_fields = ("name", "address")
>
> inlines = [OrderInline]
>
> @admin.register(Order)
> class OrderAdmin(admin.ModelAdmin):
> list_display = ("restaurant", "order_number")
>
> @admin.register(Product)
> class ProductAdmin(admin.ModelAdmin):
> list_display = ("name", "price")
>
> search_fields = ("name",)
> }}}
New description:
This error occurs on versions after removing the "collapse.js" and moving
to <details> and <summary> tags, mainly Django>=5.1 and in my opinion is
purely JS/CSS related and Python independent. This happens using both
`StackedInline` and `TabularInline`.
Tested on Google Chrome (135.0.7049.96), Edge (135.0.3179.85), Brave
(1.77.100), but with inconsistnt results, seems like the **problems is
mainly on desktop**, but also on mobile devices most consistently when
using desktop mode with sidebar open (I know how it sounds, but it might
be caused by some element width checking).
Sometimes it happens after refresh (1st gif) and sometimes from the start
(2nd gif).
I identified the problem is with `width: auto;` instead of e.g. `width:
260px;` on `<span class="select2 select2-container select2-container
--admin-autocomplete">` set by `Select2.prototype._resolveWidth`.
https://github.com/django/django/blob/1831f7733d3ef03d1ca7fac3e8d9f4c5e3e3375e/django/contrib/admin/static/admin/js/vendor/select2/select2.full.js#L5496
[[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
tickets/refs/heads/main/36336/2025-04-22%2000%2048%2015.gif)]]
[[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
tickets/refs/heads/main/36336/2025-04-22%2000%2051%2030.gif)]]
I have successfully reproduces using Django 5.2 on Windows 11, on multiple
browsers, on two separate devices, one with 2560x1440 and one with
1920x1080, in both windowed and fullscreen modes. I even tested hosting
project on both Windows and Linux, no changes, but as mentioned above, it
seems to be purely frontend related issue.
After updating Firefox I am unable to reproduce, I do not know which
version I used before, and at this point I am not sure whether there was a
problem before, right now it seems it is only affecting chromium based
browsers.
No model instances have to be created, it doesn't matter whether user is
editing existing object or adding a new one.
Code:
== models.py
{{{#!python
from django.db import models
class Restaurant(models.Model):
name = models.CharField(max_length=100)
address = models.CharField(max_length=255)
def __str__(self):
return self.name
class Order(models.Model):
restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE)
order_number = models.CharField(max_length=20)
products = models.ManyToManyField("Product", related_name="orders")
def __str__(self):
return f"Order {self.pk} from {self.restaurant.name}"
class Product(models.Model):
name = models.CharField(max_length=100)
price = models.DecimalField(max_digits=10, decimal_places=2)
def __str__(self):
return f"{self.name} - ${self.price}"
}}}
== admin.py
{{{#!python
from django.contrib import admin
from .models import Restaurant, Order, Product
class OrderInline(admin.StackedInline):
model = Order
extra = 3
fields = ["order_number", "products"]
autocomplete_fields = ["products"]
classes = ["collapse"]
@admin.register(Restaurant)
class RestaurantAdmin(admin.ModelAdmin):
list_display = ("name", "address")
search_fields = ("name", "address")
inlines = [OrderInline]
@admin.register(Order)
class OrderAdmin(admin.ModelAdmin):
list_display = ("restaurant", "order_number")
@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
list_display = ("name", "price")
search_fields = ("name",)
}}}
--
Comment:
Michał, thank you for the further details. With your instructions, I was
able to reproduce. It takes a few attempts, but I managed to do it using
Chrome 135.0.7049.84 (official build), incognito session. I agree the
issue seems to be that the "autocomplete span" has `width: auto;` when the
bug is visible, and in other cases, when the UI looks as expected, it
shows (for example) `width: 227.5px;`.
I'll accept the ticket since it's an issue, but unclear how we can
reliably fix it. Do you have a suggestion? Perhaps we could try upgrading
`select2` to its latest version and see if this is fixed?
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:4>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Natalia Bidart):
* stage: Unreviewed => Accepted
Old description:
> This error occurs on versions after removing the "collapse.js" and moving
> to <details> and <summary> tags, mainly Django>=5.1 and in my opinion is
> purely JS/CSS related and Python independent. This happens using both
> `StackedInline` and `TabularInline`.
>
> Tested on Google Chrome (135.0.7049.96), Edge (135.0.3179.85), Brave
> (1.77.100), but with inconsistnt results, seems like the **problems is
> mainly on desktop**, but also on mobile devides most consistently when
> using desktop mode with sidebar open (I know how it sounds, but it might
> be caused by some element width checking).
> Sometimes it happens after refresh (1st gif) and sometimes from the start
> (2nd gif).
>
> I identified the problem is with `width: auto;` instead of e.g. `width:
> 260px;` on `<span class="select2 select2-container select2-container
> --admin-autocomplete">` set by `Select2.prototype._resolveWidth`.
> https://github.com/django/django/blob/1831f7733d3ef03d1ca7fac3e8d9f4c5e3e3375e/django/contrib/admin/static/admin/js/vendor/select2/select2.full.js#L5496
>
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> tickets/refs/heads/main/36336/2025-04-22%2000%2048%2015.gif)]]
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> tickets/refs/heads/main/36336/2025-04-22%2000%2051%2030.gif)]]
>
> I have successfully reproduces using Django 5.2 on Windows 11, on
> multiple browsers, on two separate devices, one with 2560x1440 and one
> with 1920x1080, in both windowed and fullscreen modes. I even tested
> hosting project on both Windows and Linux, no changes, but as mentioned
> above, it seems to be purely frontend related issue.
>
> After updating Firefox I am unable to reproduce, I do not know which
> version I used before, and at this point I am not sure whether there was
> a problem before, right now it seems it is only affecting chromium based
> browsers.
>
> No model instances have to be created, it doesn't matter whether user is
> editing existing object or adding a new one.
>
> Code:
> == models.py
> {{{#!python
> from django.db import models
>
> class Restaurant(models.Model):
> name = models.CharField(max_length=100)
> address = models.CharField(max_length=255)
>
> def __str__(self):
> return self.name
>
> class Order(models.Model):
> restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE)
> order_number = models.CharField(max_length=20)
> products = models.ManyToManyField("Product", related_name="orders")
>
> def __str__(self):
> return f"Order {self.pk} from {self.restaurant.name}"
>
> class Product(models.Model):
> name = models.CharField(max_length=100)
> price = models.DecimalField(max_digits=10, decimal_places=2)
>
> def __str__(self):
> return f"{self.name} - ${self.price}"
> }}}
>
> == admin.py
> {{{#!python
> from django.contrib import admin
>
> from .models import Restaurant, Order, Product
>
> class OrderInline(admin.StackedInline):
> model = Order
> extra = 3
>
> fields = ["order_number", "products"]
> autocomplete_fields = ["products"]
>
> classes = ["collapse"]
>
> @admin.register(Restaurant)
> class RestaurantAdmin(admin.ModelAdmin):
> list_display = ("name", "address")
> search_fields = ("name", "address")
>
> inlines = [OrderInline]
>
> @admin.register(Order)
> class OrderAdmin(admin.ModelAdmin):
> list_display = ("restaurant", "order_number")
>
> @admin.register(Product)
> class ProductAdmin(admin.ModelAdmin):
> list_display = ("name", "price")
>
> search_fields = ("name",)
> }}}
New description:
This error occurs on versions after removing the "collapse.js" and moving
to <details> and <summary> tags, mainly Django>=5.1 and in my opinion is
purely JS/CSS related and Python independent. This happens using both
`StackedInline` and `TabularInline`.
Tested on Google Chrome (135.0.7049.96), Edge (135.0.3179.85), Brave
(1.77.100), but with inconsistnt results, seems like the **problems is
mainly on desktop**, but also on mobile devices most consistently when
using desktop mode with sidebar open (I know how it sounds, but it might
be caused by some element width checking).
Sometimes it happens after refresh (1st gif) and sometimes from the start
(2nd gif).
I identified the problem is with `width: auto;` instead of e.g. `width:
260px;` on `<span class="select2 select2-container select2-container
--admin-autocomplete">` set by `Select2.prototype._resolveWidth`.
https://github.com/django/django/blob/1831f7733d3ef03d1ca7fac3e8d9f4c5e3e3375e/django/contrib/admin/static/admin/js/vendor/select2/select2.full.js#L5496
[[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
tickets/refs/heads/main/36336/2025-04-22%2000%2048%2015.gif)]]
[[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
tickets/refs/heads/main/36336/2025-04-22%2000%2051%2030.gif)]]
I have successfully reproduces using Django 5.2 on Windows 11, on multiple
browsers, on two separate devices, one with 2560x1440 and one with
1920x1080, in both windowed and fullscreen modes. I even tested hosting
project on both Windows and Linux, no changes, but as mentioned above, it
seems to be purely frontend related issue.
After updating Firefox I am unable to reproduce, I do not know which
version I used before, and at this point I am not sure whether there was a
problem before, right now it seems it is only affecting chromium based
browsers.
No model instances have to be created, it doesn't matter whether user is
editing existing object or adding a new one.
Code:
== models.py
{{{#!python
from django.db import models
class Restaurant(models.Model):
name = models.CharField(max_length=100)
address = models.CharField(max_length=255)
def __str__(self):
return self.name
class Order(models.Model):
restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE)
order_number = models.CharField(max_length=20)
products = models.ManyToManyField("Product", related_name="orders")
def __str__(self):
return f"Order {self.pk} from {self.restaurant.name}"
class Product(models.Model):
name = models.CharField(max_length=100)
price = models.DecimalField(max_digits=10, decimal_places=2)
def __str__(self):
return f"{self.name} - ${self.price}"
}}}
== admin.py
{{{#!python
from django.contrib import admin
from .models import Restaurant, Order, Product
class OrderInline(admin.StackedInline):
model = Order
extra = 3
fields = ["order_number", "products"]
autocomplete_fields = ["products"]
classes = ["collapse"]
@admin.register(Restaurant)
class RestaurantAdmin(admin.ModelAdmin):
list_display = ("name", "address")
search_fields = ("name", "address")
inlines = [OrderInline]
@admin.register(Order)
class OrderAdmin(admin.ModelAdmin):
list_display = ("restaurant", "order_number")
@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
list_display = ("name", "price")
search_fields = ("name",)
}}}
--
Comment:
Michał, thank you for the further details. With your instructions, I was
able to reproduce. It takes a few attempts, but I managed to do it using
Chrome 135.0.7049.84 (official build), incognito session. I agree the
issue seems to be that the "autocomplete span" has `width: auto;` when the
bug is visible, and in other cases, when the UI looks as expected, it
shows (for example) `width: 227.5px;`.
I'll accept the ticket since it's an issue, but unclear how we can
reliably fix it. Do you have a suggestion? Perhaps we could try upgrading
`select2` to its latest version and see if this is fixed?
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:4>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Apr 22, 2025, 4:39:34 PM4/22/25
to django-...@googlegroups.com
#36336: Incorrect size of first autocomple in Inlines with "collapsed" class (on
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Michał Pokusa):
chromium based browsers?)
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: autocomplete | Triage Stage: Accepted
collapse size inline |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
I don't believe updating the `select2` would do anything, because I am
nearly sure the problem is in the `Element.outerWidth()` that is still
used be the latest version.
Additional notes say:
''"The value reported by .outerWidth() is not guaranteed to be accurate
when the element or its parent is hidden."''
https://api.jquery.com/outerWidth/#:~:text=The%20value%20reported%20by%20.outerWidth()%20is%20not%20guaranteed%20to%20be%20accurate
Inlines with "collapse" are hidden by default, because they are inside
<details> tag, so that is probably why the `Element.outerWidth()` has
problem calculating the correct width. That said, I am not sure why other
ones are calculated, but the fact that it is always the first one that has
wrong size suggest that maybe there is some kind of side effect to using
it for the first time.
One way to fix this, without modifying the `select2` code , is hard coding
<details open> and manually closing it using JS later, after initializing
all autocomplete widgets.
This is how the old "collapse.js" used to do it, but using <div> instead
of <details> tag.
As a proof of concept I hard coded `<details open>` in `stacked.html` and
`tabular.html` and added `this.querySelector(":scope > fieldset >
details")?.removeAttribute("open");` in `inlines.js` and it seems to solve
the problem.
My concern is that it would flicker on page load, but as said before,
`collapse.js` worked the same way.
PS
Also, maybe this could be a good moment to add support for "open" class,
so that it is possible to make a fieldset collapsible, but opened by
default.
https://stackoverflow.com/questions/61220704/how-to-make-all-the-inlines-
collapsible-items-in-django-admin-to-default-open
https://stackoverflow.com/questions/1766864/django-admin-add-collapse-to-a
-fieldset-but-have-it-start-expanded
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:5>
Reply all
Reply to author
Forward
0 new messages