CSS styles are conflicting with Django Admin

[bendavis78]

When loading martor in the admin, it loads CSS rules which overrides many admin styles. For example, when using bootstrap theme, it causes collapsible fieldsets to be completely hidden:

.collapse:not(.show) {
    display: none;
}

Even when using the "semantic" theme, there are many style definitions that are not namespaced, and causes default admin styles to be overriden, for example, h2 headings look way to big because of this rule in martor-admin.css:

h2 {
    font-size: 16px!important;
    margin: 1em 0 0.5em 0!important;
}

I'm assuming these style definitions are only meant for the preview. If that's the case, then they should be namespaced to the preview box.

[jducastel]

It also messes with inlines.

I wondered why my last inline elements weren't saved on an admin form.

It seems like it's because Django admin uses a hidden inline that Martor "un-hide", but it is not functional.

From https://stackoverflow.com/questions/22514186/django-inlines-do-not-save :

I used Firebug to inspect the page with the default template stying and it turns out that django hides a final empty form (your proposed temporary solution). So for me the issue was I had set display: inline-block on the inline-related class which all of the inline forms belong to (in django 1.6). To fix it I set display: none on the empty-form class, which only the final inline form belongs to.

[agusmakmun]

I thinking to use css namespace to prevent the conflict.
Here is example how to use namespace: https://stackoverflow.com/a/13977230/6396981

Related issue: #180

[Winspear]

In order to work around this issue, we forked the branch and removed the martor-admin.css file from the MartorWidget class like so:

        selected_theme = get_theme()
        css = {
            "all": (
                "plugins/css/ace.min.css",
                "plugins/css/resizable.min.css",
                "martor/css/martor.%s.min.css" % selected_theme,
                # removed due to django admin css conflict. See https://github.com/agusmakmun/django-markdown-editor/issues/185
                # "martor/css/martor-admin.min.css",
            )
        }

We couldn't see what the martor-admin.css was adding to this package. Obviously this is a hack, but in case anybody else is running into this issue.

A full fix would likely require namespacing the file, as mentioned by @agusmakmun

[glujan]

Please note that bootstrap theme (martor/css/martor.bootstrap.min.css) also conflicts with:

• admin panel sidebar - app name is below models list from that app,
• headers on the whole site, including h1 header in top bar and h2 headers in fieldsets,
• inlines (ie text in the td.original is cropped).

I tried using semantic theme but it does not play nicely with other admin plugins I'm using.

Having a CSS theme in a namespace would be great and would probably fix this!

[voxxelshmoxxel]

Any updates on this one?

[agusmakmun]

Hello everyone, did you guys tried to upgrade the version?

pip install martor --upgrade

Hopefully this fixed in the latest version.

[FlorianPix]

I still have this issue with version=1.6.44.

[FlorianPix]

I think the issue does not lie in martor-admin.css or martor.bootstrap.css but instead in the plugins bootstrap.min.css.

My proposed solution is to add .main-martor before every css selector so that it only effects the actual martor compoents and not the rest of the page.

I did that on my fork for bootstrap.min.css but you would need to do that as well for semantic.min.css etc..