Editable BooleanField on Admin List View - CSS Issue

Using Django The Admin
1

Hello! :slight_smile:

In Django Admin, if you specify a BooleanField in list_display, Admin shows it as a tick mark or cross. Now if you make that field editable (by adding it to list_editable), it changes it to a checkbox, and adds a Save button at the bottom.

That’s all good, but the issue is CSS-related (I think). For each of those checkboxes that is selected, it sees that row in the list as selected, and will change the background colour. Toggling the checkbox on and off toggles the background colour. This is the behaviour that would be expected from the first checkbox in each row, which is meant to be used for actions. Any other checkboxes in the list shouldn’t trigger the row to be selected.

I’m not sure where exactly the root of this issue lies, or if it’s even something that Django can fix. But just thought I’d mention it, to see if anyone has any ideas.

Thank you!

2

Can you comment what version of Django - Python are you using? Do you have some package that works in the Admin Site?

3

Apologies! This is Django 4.2 on Python 3.11. :slight_smile: Not using any other packages that integrate with the admin.

4

This appears to be a result of the fix for #33491 which added the following to the changelists.css file:

#changelist table tbody tr:has(input[type=checkbox]:checked) {
    background-color: var(--selected-row);
}

I’m far from being a CSS expert, but it appears to me that this will set the background color for any selected checkbox in the row.

I don’t know if its possible to construct a selector so that it only applies to the first element (or first checkbox) - or even if that would be the correct solution.

5

I think this should work:

#changelist table tbody tr:first-child input[type=checkbox]:checked {
background-color: var(–selected-row);
}

I will tested and made a PR

6

Making some manual tests I think the problem is with the chromium engine. Sadly I haven´t a webkit Browser since I use WSL. I will make other tests and report the progress in this space.

7

Hi everyone,

I’m writing this in case someone else is having the same problem. After some testing, I’m confident that the problem is with the browser cache. If you’re developing with multiple Django versions (in my case, 3.1, 3.2, 4.0, and 4.2), the browser cache can use older versions of CSS files, which can cause problems.

One specific problem that I encountered was with the delete button in the change_view of a ModelAdmin. The button was being displayed as a block element, and it was taking up the entire container in a new row.

To fix this problem, I cleared the browser cache and restarted the development server. This forced the browser to load the latest versions of the CSS files, and the problem was resolved. I think it could be a good “first general solution” in case of problems with css and Dajngo Admin.

I hope this helps!

8

I have tested this and am convinced that it is not due to caching. Clearing the cache, restarting the server, etc, did not resolve the problem.
Yes, there are other problems with the CSS that I did also encounter while switching Django versions, but the one with the row selection remains no matter what I try.

9

I will test again, because this exactly problem was solving in my dev environment. Could you share your exact environment (OS, Web Browser).

Have you try with other browsers? Have you try in LAN? Production?

10

This has been fixed in 4.2.3, I see now.

Second item under bugfixes. :slight_smile: