#36336: Incorrect size of first autocomple in Inlines with "collapsed" class
-------------------------------------+-------------------------------------
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
-------------------------------------+-------------------------------------
Description changed by Michał Pokusa:
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-
> ticket/refs/heads/main/2025-04-19%2011%2017%2043.png)]]
>
> Mobile (Chrome):
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> ticket/refs/heads/main/Screenshot_20250419_113946_Chrome.png)]]
> [[Image(https://raw.githubusercontent.com/michalpokusa/static-django-
> ticket/refs/heads/main/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, 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",)
}}}
--
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:1>
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/010701964d7fbc05-33ee94e4-e3a5-4d61-87e1-0c52e656dcf6-000000%40eu-central-1.amazonses.com.
