CODEWITHSUNDEEP
cssdjango
user2872147
user2872147

Reputation: 219

Modifying CSS for a Django Column Width

I want to make a column wider in the Django Admin change_list.

I've read this link, which references

"The field names in list_display will also appear as CSS classes in the HTML output, in the form of column- on each element. This can be used to set column widths in a CSS file."

I have a column named "project."

I added this 

th.column-project{width:50%}

to the end of an existing css file.

Nothing happened. What am I doing wrong?

Here is the css path

#result_list > thead > tr > th.sortable.column-project

and some of the actual HTML

<div class="grp-module grp-changelist-results">
    <table id="result_list" cellspacing="0" class="grp-sortable">
        <thead>
            <tr>
             <th scope="col"  class="sortable column-project">
                 <div class="grp-text"><a href="?o=4.2">Project</a></div>
             </th>
            </tr>
        </thead>

Upvotes: 0

Views: 531

Answers (2)

Wouter Klein Heerenbrink
Wouter Klein Heerenbrink

Reputation: 1391

The answer is somewhat listed in the comments above. For future readers of this QA:

  1. Do an Inspect Element on the TH in the table to see if your CSS is applied
  2. Check if anothern CSS definition is more specific and therefore overruling your own statement; if so, make yours more specific

The OP has used the grp-text class to style the column. This suggest the presence of Grappelli as skin over the admin. When you aren't using Grappelli, the class name would be .text.

Overriding the grp-text does not seem to be right because this could mess with other elements that are present in your TH. but for now you've got a solution.

Upvotes: 1

user2872147
user2872147

Reputation: 219

Thanks to some help from Wouter above, I realized that I needed to call out the specific class.

th.sortable.column-project .grp-text {width:50%}.

Upvotes: 0

Related Questions