Semantic conflicts with bootstrap

[olymk2]

This uses semantic.js if you install on a site with bootstrap it breaks dialog boxes becuase they have the same .dialog js methods and similar styles.

Is there a way to fix this with out changing an entire site to use bootstraps no conflict mode ?

currently i have had to remove semantic.js to make dialogs work on my site any better solution ?

I am currently trying to integrate this into django wiki i have a PR with my current progress if interested.

django-wiki/django-wiki#709

[agusmakmun]

That why I only including to integrate with Semantic-UI on the features, because to much changes if want to integrate it with bootstrap without conflicts. Let me see your PR, I really appreciate it.

[olymk2]

Well I kinda opened this for discussion, my fix was to remove semantic.js is it actually used by drac editor ?

Seems semantic is not such a great choice if you want to integrate in other projects Semantic-Org/Semantic-UI#1701 I have yet to see any other django projects use semantic so its makes using the editor limited.

Not sure on the correct approach to even fixing this ? remove semantic and have custom styles prefix semantic css and js files to avoid the conflict perhaps.

or have a toggle to disable it and use bootstrap as an alternative perhaps ?

[olymk2]

possibly found a solution to this, if we change martor to use sass we can import the classes with a prefix which should solve the problem ?

.martor {
  @import (less) url("semantic.css");
}

for example any thoughts ? not sure how many changes would be required for this.

[agusmakmun]

I think not only it, because the html elements between bootstrap and semantic is different. and also about toggle...

[agusmakmun]

@olymk2, I suggest to create a new branch if you want to PR..

[olymk2]

I will i am doing some experiments to try and resolve it, if i get any where i will put in a PR Think i can isolate the css but the javascript auto applies and i have not found a way to isolate it otherr than modify the semantic.js file which may be whats needed.

[agusmakmun]

great idea 👍, maybe you also need to looks at the html selectors on martor.js by changing martor.min.js to martor.js

[eriktelepovsky]

Hi, @olymk2 Have you figured out how to add Bootstrap support without semantic conflicts, please?

[eriktelepovsky]

Maybe using jquery.scoped.js in your own bootstrap project can be a workaround?

Something like tihs:

<script src="{% static '/assets/libraries/jQuery-Scoped-CSS-plugin/jquery.scoped.js' %}"></script>
<script>
    var semantic_link = $('link[href$="semantic.min.css"]');
    semantic_link.remove();
    $('.section-martor').prepend('<style type="text/css" scoped="true"> @import url('+ semantic_link.attr('href') +'); </style>');
    $.scoped();
</script>

[olymk2]

well you can fix the styles with sass, the above would do a similar job it the javascript that still needs a work around

[reyesvicente]

What's the fix for this issue?

[r1bnc]

Any update on this issue?

[GitRon]

Same issue here. Global fonts and headlines are changend on the page where martor is living.

[GitRon]

Cool! Does this mean an update will fix the issue? Or when is a release planned? Thanks!

[agusmakmun]

@GitRon now martor supported with bootstrap and semantic ui themes.
you can checkout this example martor_demo/app/templates or in readme

you can easily select the theme in your settings.py, e.g:

# Choices are: "semantic", "bootstrap"
MARTOR_THEME = 'bootstrap'

Please upgrade for newest version;

pip install martor --upgrade

[GitRon]

Actually, this makes things worse. I crashes the layout of my base page including navigation. With semantic I just see wrong fonts and colors 😔