Change the column width in the django admin panel

Question

My admin.py looks like this:

class ChangeAdmin(GuardedModelAdmin):
    form = ChangeForm
    search_fields = ('RFC', 'Ticket_Number', 'User_Email', 'Change_Details')
    list_display = ('RFC', 'Ticket_Number', 'User_Requested_Time', 'Start_Time', 'End_Time',
                    'User_Email', 'Line_of_Business', 'Conf_Call_Details', 'Region',
                    'Summary', 'Description', 'Change_Details', 'Site_code', 'Configuration_Item',
                    'Plan_Owner', 'Plan_status', 'Change_Owner', 'Implementer', 'Validator')
    date_hierarchy = 'Start_Time'
    list_select_related = True

As is evident,there are lots of list fields in the table display.This is screwing up the way the data is being shown in the columns..See screenshot enter image description here

How can I resize the column width in the django admin ?

user_13618072 · Answer

admin.py:

class MyClassAdmin(admin.ModelAdmin):

    class Media:
        css = {
            'all': ('fancy.css',)
        }

fancy.css:

.column-foo {
    width: 20px;
}

where "foo" is a field name.

Source: https://docs.djangoproject.com/en/3.0/topics/forms/media/

user_15027223 · Answer

Tested on Django 3.2, use min-width instead of width.

class MyClassAdmin(admin.ModelAdmin):

    class Media:
        css = {
            'all': ('css/fancy.css',)
        }

.column-foo {
    min-width: 20px;
}

user_12126717 · Answer

The previous answers did not work for me, perhaps they are outdated. I added padding to the column headers to make them wider.

Create custom css file in your static folder and override the "change_list.html" file

change_list.html (located at /templates/admin/change_list.html)

{% extends "admin/change_list.html" %}
{% load static %}
{% block extrahead %}
    
    
{% endblock %}

custom_changelists.css

.column-FIELD_NAME{
    padding-right: 150px !important;
}

Change the column width in the django admin panel

5 Answers