Django Admin form - How to override MultiSelectField class?

Question

I'm struggling with a rendering issue using Django Grappelli and Django Multiselectfield together in the admin-site. The checkbox labels are misaligned:

Grappelli defines two CSS classes:

.aligned label {
    display: block; float: left;
    padding: 0 10px 6px 0;
    width: 120px;
}
.aligned .vCheckboxLabel {
    display: inline; float: none; clear: both;
    margin: 0 0 0 10px; padding: 0;
}

If I change the checkbox class to ".vCheckboxLabel" in the browser console, the labels are aligned correctly and there's no issue. However, I can't for the life of me find how to set the class in the admin template.

Using {% if field.is_checkbox %} in the Django admin template doesn't work because it's a multiselectfield, which is instead rendered as a list of checkboxes in {{ field.field }}.

How can I specify or override the class for MultiSelectField checkboxes in the template or elsewhere?

Answer 1

Add vCheckboxLabel in Model or Form class where you are defining that form. If you are defining form using Form class then use:

myfield = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'vCheckboxLabel'}))

If you are using models then add widget to the column. https://docs.djangoproject.com/en/1.8/topics/forms/modelforms/#specifying-widgets-to-use-in-the-form-with-widgets

Alternate: For simplicity you can use java script on that page. Select checkbox class and change it to vCheckboxLabel. But it is not recommended.