Label not rendering above field.

Using Django The Admin
1

Im facing a weird issue for rendering the select multiple widget in forms.
The labels are not rendering before the widget.

I have attached the screenshot of the widget UI.
and attached the inspected css screenshot.

IMG_20240404_195002
IMG_20240404_1950021920×1083 136 KB

17122412062078793274999280429682
171224120620787932749992804296821920×2560 202 KB

2

FWIW I’m seeing the same thing, using Django 5.0.3. I don’t remember seeing it before, so maybe it’s a bug in this version?

3

Nope, I’ve gone back to Django 5.0 and it’s still the same for me.

Weird, I would have thought I’d have noticed that before now.

4

And I’ve now upgraded to 5.0.4 and it’s still the same.

(Sorry for the flurry of replies while I wonder what’s going on!)

5

Nah it’s ok. Now i know that im not the only one who is getting this issue.

6

Looks like the problem is with some JS used by the Admin. I’ve opened a new ticket about it #35353 (SelectFilter2.js puts the label for Django Admin filter fields in the wrong place) – Django

7

They can’t reproduce the problem and have closed the ticket. Fair enough. There’s obviously something both you and I are doing that causes this!

8

Just out of curiosity and as a debugging step, do you get the same results when using an incognito window in your browser? Also, are you using any custom css files?

9

Yes, I tried an incognito window and it was the same.

[lots deleted while I investigated further…]

I now see the fault comes from when I define a field in the Admin’s form, and set its widget.

So I have this in my admin.py:

@admin.register(Website)
class WebsiteAdmin(admin.ModelAdmin):
    form = WebsiteForm
    # ...

And WebsiteForm includes this for one of the faulty fields:

    countries = forms.MultipleChoiceField(
        choices=list(countries_object),
        widget=FilteredSelectMultiple("countries", is_stacked=False),
        required=False,
    )

If I remove the widget=... line, the field renders correctly. So I guess that’s not the correct widget. I haven’t had time to look into what it should be yet.

I shouldn’t have filed that Django issue without investigating further :frowning:

@harshalkumar-ishi - do you have something similar in your project?

1 Like
10

Looks like I should be wrapping the field’s widget in RelatedFieldWidgetWrapper but, despite looking at lots of examples and its source code I can’t figure out what the rel argument should be:

    countries = forms.MultipleChoiceField(
        choices=list(countries_object),
        widget=RelatedFieldWidgetWrapper(
            FilteredSelectMultiple("countries", is_stacked=False),
            rel=???,  # No idea!
            admin_site=admin.site,
        ),
        required=False,
    )
1 Like
11

FWIW, something like this works with a few fields I’ve updated:

from django import forms
from django.contrib import admin
from django.contrib.admin.widgets import FilteredSelectMultiple, RelatedFieldWidgetWrapper
from .models import Article, Publication

class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        exclude = ()

    publications = forms.ModelMultipleChoiceField(
        queryset=Publication.objects.all(),
        widget=RelatedFieldWidgetWrapper(
            FilteredSelectMultiple("publications", is_stacked=False),
            rel=Article._meta.get_field("publications").remote_field,
            admin_site=admin.site,
            can_add_related=True,
        )
    )

BUT, the field I was initially trying to add RelatedFieldWidgetWrapper to is a CountryField from django-countries and that generates an error.

1 Like
12

I will check for this.

13

no we havent used the custom css files specificaly for this field.

14

I tried this method but there are other problems occurred so i had changed the field to ChoiceField.

15

Many thanks for making me aware of RelatedFieldWidgetWrapper existence. I’m using Django for a while now (back to 1.1 version), and never heard about it before.

You saved my day for FilteredSelectMultiple misplaced labels fields in the admin.

1 Like
16

This suggestion helped me…Thank you very much…