search

onepill / django-simplemde

Use markdown editor https://github.com/sparksuite/simplemde-markdown-editor in django project
32 stars 17 forks source link

Django admin label is floated and breaks into the editor toolbar #14

Closed cjdreiss closed 6 years ago

cjdreiss commented 6 years ago

Hello,

I ran into this issue in another repo that I forked and fixed it there. Django's label in the admin has a float right, and when the editor is put in the label is inside the toolbar.

I'll submit a PR with the fix, see details below.

screen shot 2018-03-14 at 2 00 47 pm

Removing the float left for just that field fixes the design.

screen shot 2018-03-14 at 2 23 14 pm

I fixed it by putting a style tag in the widget that has a selector based on the name of the field so it doesn't screw up the rest of the labels in admin.

def render(self, name, value, attrs=None):
    if 'class' not in attrs.keys():
        attrs['class'] = ''

    attrs['class'] += ' simplemde-box'

    attrs['data-simplemde-options'] = json_dumps(self.options)

    html = super(SimpleMDEEditor, self).render(name, value, attrs)

    # insert this style tag to fix the label from breaking into the toolbar
    html += "<style>.field-%s label { float: none; }</style>" % name

    return mark_safe(html)