Move essential styles inside Canvas

src/canvas/view/CanvasView.js

@@ -41,7 +41,7 @@ function(Backbone, FrameView) {
         frame.el.onload = function () {
           var scripts = that.config.scripts.slice(0),  // clone
               counter = 0;
-            
+
           function appendScript(scripts) {
             if (scripts.length > 0) {
               var script = document.createElement('script');
@@ -61,7 +61,7 @@ function(Backbone, FrameView) {
      * Render inside frame's body
      * @private
      */
-    renderBody: function(){
+    renderBody: function() {
       var wrap = this.model.get('frame').get('wrapper');
       var em = this.config.em;
       if(wrap) {
@@ -71,19 +71,22 @@ function(Backbone, FrameView) {
         var conf = em.get('Config');
         body.append(wrap.render()).append(cssc.render());
         var protCss = conf.protectedCss;
-        var frameCss = '.' + ppfx + 'dashed :not([contenteditable]) > *{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' +
-                       '.' + ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}' +
-                       '.' + ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+
-                       '.' + ppfx + 'freezed{opacity: 0.5; pointer-events: none}' +
-                       '.' + ppfx + 'no-pointer{pointer-events: none}' +
-                       '.' + ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}' +
-                       '.' + ppfx + 'grabbing{cursor: grabbing; cursor: -webkit-grabbing}' +
-                       '* ::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.1)}' +
-                       '* ::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.2)}' +
-                       '* ::-webkit-scrollbar {width: 10px}' +
-                       (conf.canvasCss || '');
-        if(protCss)
-          body.append('<style>' + frameCss + protCss + '</style>');
+
+        // I need all this styles to make the editor work properly
+        var frameCss = '* {box-sizing: border-box;} body{margin:0;height:auto;background-color:#fff} #wrapper{min-height:100%; overflow:auto}' +
+          '.' + ppfx + 'dashed :not([contenteditable]) > *{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' +
+          '.' + ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}' +
+          '.' + ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+
+          '.' + ppfx + 'freezed{opacity: 0.5; pointer-events: none}' +
+          '.' + ppfx + 'no-pointer{pointer-events: none}' +
+          '.' + ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}' +
+          '.' + ppfx + 'grabbing{cursor: grabbing; cursor: -webkit-grabbing}' +
+          '* ::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.1)}' +
+          '* ::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.2)}' +
+          '* ::-webkit-scrollbar {width: 10px}' +
+          (conf.canvasCss || '');
+        frameCss += protCss || '';
+        body.append('<style>' + frameCss + '</style>');
         body.append(this.getJsContainer());
         em.trigger('loaded');
         this.frame.el.contentWindow.onscroll = this.onFrameScroll;