#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:
collapse size inline | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Michał Pokusa):
* resolution: needsinfo =>
* status: closed => new
* summary: Incorrect size of first autocomple in Inlines with "collapsed"
class =>
Incorrect size of first autocomple in Inlines with "collapsed" class
(on chromium based browsers?)
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, Firefox, Edge, Brave and Safari, but with
> inconsistnt results, seems like the **problems is ''mainly'' on
> desktop**, but also on mobile devides when using desktop mode with
> sidebar open (I know how it sounds, but it might be caused by some
> element width checking).
>
> Desktop:
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> tickets/refs/heads/main/36336/2025-04-19%2011%2017%2043.png)]]
>
> Mobile (Chrome):
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> tickets/refs/heads/main/36336/Screenshot_20250419_113946_Chrome.png)]]
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> tickets/refs/heads/main/36336/Screenshot_20250419_114010_Chrome.png)]]
>
> Steps to reproduce:
> == 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 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",)
}}}
--
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:3>
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/010701965ac6bff2-218036a3-7908-44dd-bd68-824296013dd9-000000%40eu-central-1.amazonses.com.
