Several bugs in Jazzmin Style

[Alexgs27]

trafficstars

Different issues with Jazzmin style.

1. ManytoMany field CSS is not working properly and this field have no border when use autocomplete fields(#307)

Problem in live test app:

Possible solution:

• Add two lines in "autocomplete.css":

border: 1px solid #aaa; border-radius: 4px;

2. Many-To-Many Style is not readable (#321)

I reproduce this problem locally in test app. The Many-to-Many Fields is not readable due to background color.

If the color is changed to blue (#007bff) in section ".select2-container--default .select2-selection--multiple .select2-selection__choice" of "select2.min.css", it looks better.

3. Extra

When I use autocomplete fields with Jazzmin in my admin app, it shows a "span" to clear all selected choices without style and Many-to-Many fields use other CSS styles.

Potential Improvement:

4. Error to "Add book"

If I want to add new book, server responses a Internal Server Error (500) in live app. In local test app, I have been the problem is last_print field on Book model, this field is not blank and it isn't register in admin view. To solve this, either I add "null=True, blank=True" in last_print field and register it in admin or only add "null=True" in model.

In live test app

In local test app

5. Related Modal don't work

I can normally use popup windows, but if I active related modal, the browser block them. I tested Firefox, Chrome and Edge.

Old popup:

Related Modal

At the beginning, I thought could be a misconfiguration, but If I try demo AdminLTE, I can use Modal Examples.

[vieirafrancisco]

I'm getting the same Modal problem. Some clue?

[Alexgs27]

The problem with Related Modal is "Clickjacking Protection". See the documentation: https://docs.djangoproject.com/en/3.2/ref/clickjacking/.

Just set up X_FRAME_OPTIONS = 'SAMEORIGIN' (by default is "Deny")

I don't know if it is best solution but works for me.

[vieirafrancisco]

The problem with Related Modal is "Clickjacking Protection". See the documentation: https://docs.djangoproject.com/en/3.2/ref/clickjacking/.

Just set up X_FRAME_OPTIONS = 'SAMEORIGIN' (by default is "Deny")

I don't know if it is best solution but works for me.

Thanks!

[EricOuma]

Jazzmin has an option for adding custom css in the JAZZMIN_SETTINGS config. I was facing the autocomplete field display issue. I fixed by creating a custom CSS file and adding the following :

.select2-container--admin-autocomplete.select2-container {
    border: 1px solid #aaa;
    border-radius: 4px;
}

.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
    background: var(--body-bg);
    color: var(--body-fg);
    border: 1px solid #aaa !important; # change color according to the border color of your select field
    border-radius: 4px;
}

Note I changed to border: 1px solid #aaa !important from the original border: 1px solid var(--border-color) which means the root of the problem here is var(--border-color) is not working as expected