Editor toolbar overlaps calendar on DateField in admin

[stac47]

Hello, I have a model that is managed in admin side of my site:

class Race:
...
    date = models.DateField(verbose_name=_("date"))
    club = models.ForeignKey(Club,
                             on_delete=models.PROTECT,
                             null=True,
                             verbose_name=_("club"))
    description = tinymce_models.HTMLField(blank=True,
                                           default="",
                                           verbose_name=_("description"))

Everything works well except the display when I click on the calendar to select a date (see picture). I am currently using django-tinymce version 3.3.0 with django 3.2.4 and I don't set anything on regarding tinymce in the settings.py. I have the same result within Firefox and Safari. Thanks in advance for your help,

[zealouskestrel]

why don't you put datetime order to the last index ?

[zealouskestrel]

btw in your tinymce have a image upload ?

[jcanning]

I have the same issue. I find it odd that the only solution is to move the date field below. Did anyone come up with something better than this?

I am using Django 4.0 and Django-TinyMCE 3.4 and can confirm this issue still exists.

[claudep]

This is a z-index CSS issue. While tinymce has .tox .tox-editor-header { z-index:1; } to force the editor header to the foreground, Django's calendar widget doesn't touch the z-index property of calendar items. A workaround would be to change that z-index in your own css, either for tinymce .tox-editor-header or for Django's calendarbox. I'm not yet sure about a proper resolution of this issue.

[stac47]

Thanks all for you answers. Indeed, I tweaked my CSS to solve this. I raised that ticket to help maintainers improving this great component: as a user, I would expect tinymce would be perfectly integrated with the default Django admin components. Sorry I cannot help more: my knowledge in UI technologies is very low.

[some1ataplace]

/* Set z-index for TinyMCE toolbar */
.tox .tox-editor-header {
  z-index: 1;
}

/* Set z-index for Django admin calendar widget */
#calendarbox {
  z-index: 1001; /* This should be greater than the z-index of TinyMCE's container */
}

You can add this CSS to your project by either creating a new CSS file and linking it to your HTML templates with a tag, or by adding it to an existing CSS file that is already linked in your templates. You can also place the CSS in a Django static file, then modify your HTML templates to load it.

1. Create a new file called admin_tinymce.css in your static files directory. For example, if you're using the default Django settings, create the file in your_project/static/css/admin_tinymce.css.

2. Add the following CSS rule to the admin_tinymce.css file:

.ui-datepicker{
   z-index: 999999 !important;
}

3. In your Django project's settings.py file, add the following lines at the end:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

This will tell Django to look for static files (including admin_tinymce.css) in the static directory at the root of your project.

4. Finally, add the following line to your project's admin file (admin.py):

class Media:
    css = {
        'all': ('/static/css/admin_tinymce.css',),
    }

This will load the admin_tinymce.css file in the Django admin.

1. Create a new CSS file, for example, tinymce.css, in the static/css directory of your Django project.
2. Add the following CSS code to the tinymce.css file that I placed above.
3. In your Django admin template, add the following code in the head section to link to the tinymce.css file:

{% extends "admin/base.html" %}

{% block extrahead %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static 'css/tinymce.css' %}">
{% endblock %}

This will link to the tinymce.css` file and apply the necessary