CODEWITHSUNDEEP
djangodjango-modelsdjango-templatesdjango-viewsdjango-admin
William
William

Reputation: 4036

How to change the display of Django admin when use ManyToManyField

I'm coding a news website.News model has a ManyToManyField foreign key named tag.

Here is my News model:

class News(models.Model):
   title = models.CharField(max_length=100, verbose_name='title') 
   category = models.ForeignKey(Category, on_delete=models.CASCADE, 
   related_name="cate", blank=True, verbose_name='Category')
   tag = models.ManyToManyField(Tag, blank=True, verbose_name='Tags')

    class Meta:
        verbose_name = "新闻"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.title

Here is my tag model:

class Tag(models.Model):
    name = models.CharField(max_length=40)

    class Meta:
        verbose_name = "Tag"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name

Now I find a issue is, in the admin, the display of tag menu window is too small as this screen shot:enter image description here

However in practical projects for example a high traffic news website, there will be dozens of tags or maybe nearly 100 tags, it is really hard and frustrated to select a tag among so many tags in such a small menu window.

Here is my admin.py:

class TagAdmin(object):
    list_display = ['name']
    search_fields = ['name']
    list_filter = ['name']

xadmin.site.register(Tag, TagAdmin)

So is any good idea can make it easier?By the way I'm using Xadmin. I think maybe I should change the css of that place.

Any friend can help?Thank you so much!

Upvotes: 0

Views: 1473

Answers (2)

William
William

Reputation: 4036

Really appreciate all the answers.

And I have found the best and easiest way to solve it!

First:if you are using admin, you just need to add in admin.py:

filter_horizontal = ('tags', )

. If you are using Xadmin,just code:

style_fields = {'tag': 'm2m_transfer'}

specific example:

class NewsAdmin(object):
    list_display     = ['title',]
    search_fields    = ['title', ]
    list_filter      = ['title', ]
    style_fields     = {'tag': 'm2m_transfer'}

Upvotes: 3

Lemayzeur
Lemayzeur

Reputation: 8525

Override the django admin css, and point it to that file

from your_app.models import News

@admin.register(News)
class NewsAdmin(admin.ModelAdmin):
    filter_horizontal = ('tag',)

    class Media:
        css = {
            'all': ('your_file.css',), # file located in your static direcotry
        }

Here are some class that you can override:

.selector-available,
.selector-chosen {
    width: 100px;
}

.selector .selector-available input {
    width: 200px;
}

.selector select {
    width: 300px;
}

.selector {
    width: 400px;
}

Upvotes: 1

Related Questions