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 ?

Asked By: Amistad

||

Source

Answer 1

I think you should try this one or this one. The second link worked for me like a charm.

Answered By: sDoky

Answer 2

I’ve used this approach with django-suit:

admin.py

class GuardedAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/guarded_admin.js',)

js/guarded_admin.js

$(function(){
  $(".guarded-column.column-guarded").attr("width", "100px;");
})

You just need to figure out what the column name is in your case and change it in the above code.

Update

I recently tried this and it worked (given your column is called reports):

$('.reports-column').find('span').attr('style', 'width:150px;')

Answered By: max

Answer 3

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/

Answered By: gene

Answer 4

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 %}
    <!-- Custom -->
    <link rel="stylesheet" href="{% static 'css/custom_changelists.css' %}">
{% endblock %}

custom_changelists.css

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

Answered By: R. Anderson

Answer 5

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;
}

Answered By: Sean Chen

Answer 6

You can override forms.ModelForm then assign ChangeForm to form to change the width of each column in Django Admin as shown below. *My answer also explains other options to change the width of columns in Django Admin:

class ChangeForm(forms.ModelForm): # Here
    class Meta:
        widgets = {
            'RFC': forms.TextInput(attrs={'size':'20'}),
            'Ticket_Number' : forms.NumberInput(attrs={
                'style': 'width:20ch'
            }),
            'User_Email' : forms.EmailInput(attrs={
                'style': 'width:20ch'
            }),
            # ...
        }

class ChangeAdmin(GuardedModelAdmin):
    form = ChangeForm # Here
    search_fields = ('RFC', 'Ticket_Number', 'User_Email', 'Change_Details')
    list_display = ('RFC', 'Ticket_Number', 'User_Requested_Time', ...)
    # ...

Answered By: Kai – Kazuya Ito

Change the column width in the django admin panel

Question:

Answers: