webodf / WebODF

WebODF - JavaScript Document Engine
http://webodf.org/
793 stars 167 forks source link

Prefix CSS classes to avoid namespace collisions #915

Open robmv opened 9 years ago

robmv commented 9 years ago

The old problem with CSS and to use multiple libraries on the same codebase is that it is possible to use CSS classes that collides between projects. For example, Bootstrap defines a public class named "caret". WebODF use the same class internally but as it is already styled, the caret is not properly displayed. Using a prefix like webodf-caret can solve this problem.

As a workaround this fixes the problem

.webodf-caretOverlay .caret { display: initial; width: initial; height: initial; vertical-align: initial; border-top: initial; border-right: initial; border-left: initial; content: initial } before WebODF create the inline styles

adityab commented 9 years ago

You are right - I've encountered this problem when working with Bootstrap and WebODF. I'll make a patch...