[Django] #36336: Incorrect size of first autocomple in Inlines with "collapsed" class
9 views
Skip to first unread message
Django
Apr 19, 2025, 5:58:50 AM4/19/25
to django-...@googlegroups.com
#36336: Incorrect size of first autocomple in Inlines with "collapsed" class
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Type: Bug
Status: new | Component:
| contrib.admin
Version: 5.1 | Severity: Normal
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
-------------------------------------+-------------------------------------
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",)
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36336>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Type: Bug
Status: new | Component:
| contrib.admin
Version: 5.1 | Severity: Normal
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
-------------------------------------+-------------------------------------
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",)
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36336>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Apr 19, 2025, 6:02:24 AM4/19/25
to django-...@googlegroups.com
#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:
Component: contrib.admin | Version: 5.1
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:
collapse size inline | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
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-
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)]]
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:1>
Django
Apr 21, 2025, 9:54:08 AM4/21/25
to django-...@googlegroups.com
#36336: Incorrect size of first autocomple in Inlines with "collapsed" class
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Type: Bug | Status: closed
-------------------------------------+-------------------------------------
Reporter: Michał Pokusa | Owner: (none)
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution: needsinfo
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 Natalia Bidart):
collapse size inline | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* resolution: => needsinfo
* status: new => closed
Comment:
Hello Michał Pokusa, thank you for the ticket. I'm trying to reproduce but
I'm not getting the UI issue that you are showing. I have defined the
models and admin as you specified, but the admin UI is showing the
right/expected UI. I have tried having zero and having many Product
instances. I have tried small, medium and large screen sizes. I have used
Firefox and Django from `main` and from `stable/5.2.x`. I have tried the
`TabularInline` and the `StackedInline` for the `OrderInline`.
I'll close as `needsinfo` but please reopen with detailed instructions to
reproduce, including:
* Django version (please note that 5.1 is on security support only, so you
should try to reproduce on 5.2 or `main`)
* Browser version
* Screen size
* Expected models instances (do we need one product? two? same price? etc)
--
Ticket URL: <https://code.djangoproject.com/ticket/36336#comment:2>
Reply all
Reply to author
Forward
0 new messages