Search code examples
pythondjangotinymcedjango-tinymce

django-tinymce HTMLField covering model field description in admin/add

The Issue

The name of the model field is not visible in Django's admin "add" page when using django-tinymce's tinymce_models.HTMLField(). The Name: field is in the picture, but the Description field is not. How can I display the Description text over the TinyMCE editor?

enter image description here

The Model

class Project(models.Model):
    name = models.CharField(max_length=255)
    slug = models.SlugField(unique=True, max_length=255)
    description = tinymce_models.HTMLField()
    started = models.DateField(blank=True)

Versions

  • Django 1.10.4
  • django-tinymce 2.4.0
  • Tiny MCE 4.5.2

A Bunch of Code

https://codepen.io/anon/pen/xgqRqM

HTML is directly from Chrome Developer Tools on the Django admin page for adding this model. CSS is both Django's and Tiny MCE's. JS is from the Tiny MCE theme. It doesn't seem to render correctly on Codepen so I'm not sure how useful it will be...

Let me know if there's any more clarifying information I can provide.

More Pictures

I know the text Description: is in the HTML: enter image description here

This guy is covering it up? enter image description here

Solution

  • Yes, a familiar issue. You need to move the left margin of TinyMCE 4 widget to the right. In my django-tinymce4-lite package I use the following dynamic CSS to set the widget position:

    /* Fixes TinyMCE 4 widget position in Django admin */
.form-row .mce-tinymce {
  margin-left: {{ margin_left }}px;
}
.form-row .mce-fullscreen {
  margin-left: 0;
}

    This is the view that generates the CSS:

    def css(request):
    """
    Custom CSS for TinyMCE 4 widget

    By default it fixes widget's position in Django Admin

    :param request: Django http request
    :type request: django.http.request.HttpRequest
    :return: Django http response with CSS file for TinyMCE 4
    :rtype: django.http.HttpResponse
    """
    if 'grappelli' in settings.INSTALLED_APPS:
        margin_left = 0
    elif VERSION[0] == 1 and VERSION[1] <= 8:
        margin_left = 106  # For old style admin
    else:
        margin_left = 170  # For Django >= 1.9 style admin
    return render(request, 'tinymce/tinymce4.css', {'margin_left': margin_left}, content_type='text/css')

    But if you don't support multiple Django versions, a static CSS with the necessary margin value will be enough.