#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.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/d/msgid/django-updates/010701965e7959c1-5b4918a2-d889-4597-af05-e727568b732b-000000%40eu-central-1.amazonses.com.
