📄 Deion Hello ! I'm working with this amazing admin customi

Many to many field too little about django-jet-reboot HOT 1 OPEN

alejandroacho commented on August 12, 2024

Many to many field too little

from django-jet-reboot.

Comments (1)

alejandroacho commented on August 12, 2024 2

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