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 ?

I think you had to override the django template use link [link](http://stackoverflow.com/questions/5488159/django-admin-how-to-override-change-list-template-for-model-proxy) — Aks, Jan 07 '14 at 06:30
The accepted answer here literally said to refer to another Stack Overflow question (or else a forum guide) without any direct explanation. It's hard to give a more textbook example of a duplicate question. — Karl Knechtel, Jan 20 '23 at 00:54

score 5 · Answer 1 · edited Jul 29 '22 at 08:23

5

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/

edited Jul 29 '22 at 08:23

Dat TT

2,850
2
16
18

answered May 26 '20 at 06:46

gene

101
2
2

score 2 · Answer 2 · edited Jul 29 '22 at 08:23

2

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

edited Jul 29 '22 at 08:23

Dat TT

2,850
2
16
18

answered Sep 03 '21 at 08:01

Sean Chen

21
1

1

why its not working – hasan Sep 06 '22 at 22:47

score 1 · Answer 3 · answered Aug 25 '21 at 18:26

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

Welcome to Stack Overflow. By adding the version of your program you could improve the quality of your answer — cards, Aug 25 '21 at 21:29

max · Answer 4 · 2018-02-11T04:56:11.923

0

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;')

edited Feb 11 '18 at 04:56

answered Nov 02 '16 at 18:43

max

9,708
15
89
144

Try 2 things. First test your jquery selector in your browser to ensure it works. If it works fine in the browser dev tool, then try putting the command in a delay (to diagnose) like this: setTimeout(function() { $(".guarded-column.column-guarded").attr("width", "100px;"); }, 1000); – max Feb 03 '17 at 19:54
the content of every cell is small table for me, so I set the width for this table inside. Such way grapelli respects the width of the content and the problem solved for me – DDS Feb 04 '17 at 21:50

score 0 · Answer 5 · answered Jan 20 '23 at 00:46

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', ...)
    # ...

Change the column width in the django admin panel

5 Answers5