Many to many field too little

[alejandroacho]

📄 Description

Hello ! I'm working with this amazing admin customization, and everything is pretty fine and fancy, but I noticed that in many to many fields the field looks actually too little making this way kind of hard to work with them. Even compared with the main Django field, looks very little. So I was wondering if there is a way to make it bigger or something.

📸 Screenshot

🕐 Versions used

Django==4.0.6
django-jet-reboot==1.3.1

[alejandroacho]

By the moment I have found a workaround to fix this.

1-. Create base_site.html

You have to create the file admin/base_site.html in the template root folder. Something like this:

└── templates/      <-  Template folder that you can set it on your Django settings.
    └── admin/
        └── base_site.html

The base_site.html file must inherit the default Django base file, and the extend it with a custom css:

{% extends 'admin/base.html' %}
{% load static %}
{% block extrastyle %}
  <link rel='stylesheet' href='{% static 'admin.css' %}'>
{% endblock %}

2-. Create the CSS file

This css file must be on the static folder (this is an example path, but you can use what ever path you want, but is mandatory to be in static folder):

└── static/      <-  Static folder that you can set it on your Django settings.
    └── css/
        └── admin_extra.css

The css file must have this styles (feel free to modify it according your needs):

.related-widget-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.related-widget-wrapper select {
  width: 20rem;
  height: 15rem;
  margin-right: 3rem;
}

.related-widget-wrapper [class*="--multiple"] [class*="selection"] {
  width: 20rem;
  height: 15rem;
}

@media screen and (max-width: 480px) {
  .related-widget-wrapper {
    flex-direction: column;
  }
  .related-widget-wrapper select {
    width: 100%;
    margin-right: 0;
  }
  .related-widget-wrapper [class*="--multiple"] [class*="selection"] {
    width: 100%;
  }
}

🚀 Results

These settings results in this output:

And it's also kind of responsive as it restructures itself on window size changes. You can modify it for more several responsiveness.