2

We have to include CSS file for forge-viewer, but it breaks our own site styles. For example: - forge CSS contains Alertify styles (they overrides our own custom Alertify styles) - forge CSS has style for "#close" - this breaks our close buttons - etc

That can you suggest to solve this critical problem?

Yury Apanasik
  • 113
  • 6

1 Answers1

0

CSS collisions can easily be solved by scoping your own css or the viewer one. It is hard to tell you exactly how to fix it as there are many different ways to handle it and without knowing exactly how your css/html is structured I can't tell you the best approach.

If you are using LESS or SASS, it is pretty easy: Easily scope CSS using LESS or SASS. You can scope the viewer styles by adding the viewer div id or class to its styles.

Another approach is to adapt your own css, for example your #close button must be a direct child of a specific class:

// instead of using: 
#close { ...}

// add a parent class:
button#close.my-app { ... }

Hope that helps

Felipe
  • 4,325
  • 1
  • 14
  • 19
  • Thank you for ideas! But problem is that it is really complicated to adapt our own CSS (we are not using CSS compilers) and (in given example) we have no style for "#close" at all. So, we are thinking about adapting your CSS in flexible way. To have no probles with getting latest version of your CSS in future. – Yury Apanasik Dec 08 '17 at 12:31
  • @Phillipe, thanks for your answer. We're facing the same issue. As you said it can be easily fixes by scoping, but I believe that should be done (and easier for everyone) in the Viewer's CSS. ATM we're linking the viewer CSS directly from our page, and to fix it, We'll have to download the source and change it hoping it won't break the viewer. – Rodrigo Sep 03 '18 at 10:26
  • Unfortunately isn't straight forward to scope the forge viewer css. Here is my attempt to do it: https://gist.github.com/rodrigovrm/ae68fc11ca2b4e011ad6bbda4043e58a#file-forge-sass. Some icons are broken, can't find why. – Rodrigo Sep 03 '18 at 10:57
  • Here is a guide to scoping forge viewer CSS for next releases https://blog.yipl.com.np/css-modules-with-react-the-complete-guide-a98737f79c7c. I hope it helps. It would save us a few hours – Rodrigo Sep 03 '18 at 11:05