@innovastudio/contentbuilder 1.3.27 → 1.3.29

package/public/contentbuilder/contentbuilder.esm.js

@@ -4081,7 +4081,7 @@ class Util {
     let c = cell.nextElementSibling;
 
     if (c) {
-      if (!dom.hasClass(c, 'is-row-tool') && !dom.hasClass(c, 'is-rowadd-tool') && !dom.hasClass(c, 'is-row-overlay')) {
+      if (!dom.hasClass(c, 'is-row-tool') && !dom.hasClass(c, 'is-col-tool') && !dom.hasClass(c, 'is-rowadd-tool') && !dom.hasClass(c, 'is-row-overlay')) {
         return c;
       } else {
         return null;
@@ -4530,18 +4530,18 @@ class Util {
 
     Array.from(row.children).map(item => {
       if (item.classList.contains('is-row-tool')) return;
+      if (item.classList.contains('is-col-tool')) return;
       if (item.classList.contains('is-rowadd-tool')) return;
       item.style.width = '';
       item.style.flex = '';
     });
-    let num = 2; //is-row-tool & is-rowadd-tool
+    let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
 
     if (row.querySelector('.is-row-overlay')) {
-      num = 3; //is-row-tool, is-rowadd-tool & is-row-overlay
+      num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
     }
 
-    const cellCount = row.childElementCount - num; //minus is-row-tool & is-rowadd-tool
-
+    const cellCount = row.childElementCount - num;
     const rowClass = this.builder.opts.row;
     const colClass = this.builder.opts.cols;
     const colEqual = this.builder.opts.colequal;
@@ -4549,7 +4549,7 @@ class Util {
     if (colEqual.length > 0) {
       const cols = dom.elementChildren(row);
       cols.forEach(col => {
-        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
+        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
 
         for (let i = 0; i <= colClass.length - 1; i++) {
           dom.removeClass(col, colClass[i]);
@@ -4570,6 +4570,7 @@ class Util {
       Array.from(row.children).map(item => {
         if (item.classList.contains('is-row-tool')) return;
         if (item.classList.contains('is-rowadd-tool')) return;
+        if (item.classList.contains('is-col-tool')) return;
 
         if (item.getAttribute('data-module')) {
           this.refreshModuleLayout(item);
@@ -4583,7 +4584,7 @@ class Util {
       let n = 0;
       const cols = dom.elementChildren(row);
       cols.forEach(col => {
-        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
+        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
         n++;
 
         for (var i = 0; i <= colClass.length - 1; i++) {
@@ -4635,6 +4636,7 @@ class Util {
     Array.from(row.children).map(item => {
       if (item.classList.contains('is-row-tool')) return;
       if (item.classList.contains('is-rowadd-tool')) return;
+      if (item.classList.contains('is-col-tool')) return;
 
       if (item.getAttribute('data-module')) {
         this.refreshModuleLayout(item);
@@ -4671,14 +4673,14 @@ class Util {
       } //Limit up to 4 cells in a row
 
 
-      let num = 2; //is-row-tool & is-rowadd-tool
+      let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
 
       if (row.querySelector('.is-row-overlay')) {
-        num = 3; //is-row-tool, is-rowadd-tool & is-row-overlay
+        num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
       }
 
       if (row.childElementCount >= maxCols + num) {
-        //+3 => includes is-row-tool, is-rowadd-tool & is-row-overlay
+        //+3 => includes is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
         alert(this.out('You have reached the maximum number of columns'));
         return false;
       }
@@ -4842,7 +4844,6 @@ class Util {
     let bAddLast = false;
     let cell;
     let cellElement;
-    let columnTool;
     const builderStuff = this.builder.builderStuff;
     let quickadd = builderStuff.querySelector('.quickadd');
     const mode = quickadd.getAttribute('data-mode');
@@ -4908,9 +4909,9 @@ class Util {
       cellElement.click(); //change active block to the newly created
       // Change to row selection
 
-      rowElement.className = rowElement.className.replace('row-outline', '');
-      columnTool = this.builder.doc.querySelector('.is-column-tool');
-      columnTool.className = columnTool.className.replace('active', '');
+      rowElement.className = rowElement.className.replace('row-outline', ''); //Hide Column tool (new!)
+
+      this.builder.util.hideColumnTool();
     } else if (bSnippet) {
       if (noedit) {
         this.addContent(html, mode, 'data-noedit');
@@ -4956,14 +4957,14 @@ class Util {
 
 
         if (row.querySelector('.is-row-overlay')) {
-          if (row.childElementCount >= maxCols + 3) {
-            //+3 => includes is-row-tool, is-rowadd-tool & is-row-overlay
+          if (row.childElementCount >= maxCols + 4) {
+            //+4 => includes is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
             alert(this.out('You have reached the maximum number of columns'));
             return false;
           }
         } else {
-          if (row.childElementCount >= maxCols + 2) {
-            //+2 => includes is-row-tool & is-rowadd-tool
+          if (row.childElementCount >= maxCols + 3) {
+            //+3 => includes is-row-tool, is-col-tool & is-rowadd-tool
             alert(this.out('You have reached the maximum number of columns'));
             return false;
           }
@@ -5051,10 +5052,9 @@ class Util {
       if (cellElement) cellElement.click(); //change active block to the newly created
       // Change to row selection
 
-      rowElement.className = rowElement.className.replace('row-outline', ''); // columnTool = parent.document.querySelector('.is-column-tool');
+      rowElement.className = rowElement.className.replace('row-outline', ''); //Hide Column tool (new!)
 
-      columnTool = this.builder.doc.querySelector('.is-column-tool');
-      columnTool.className = columnTool.className.replace('active', '');
+      this.builder.util.hideColumnTool();
     }
 
     if (this.builder.useCssClasses) {
@@ -5169,7 +5169,9 @@ class Util {
     const builderStuff = this.builder.builderStuff;
     let tools = builderStuff.querySelectorAll('.is-tool');
     Array.prototype.forEach.call(tools, tool => {
-      if (tool.classList.contains('is-row-tool') || tool.classList.contains('is-column-tool') || tool.classList.contains('is-element-tool')) return;
+      // if(tool.classList.contains('is-row-tool')||
+      // tool.classList.contains('is-column-tool')||
+      // tool.classList.contains('is-element-tool')) return;
       tool.style.display = '';
       dom.removeClass(tool, 'active');
     });
@@ -5741,27 +5743,59 @@ class Util {
   } // Quick reposition column tool
 
 
-  repositionColumnTool(transition) {
-    let columnTool = this.builder.colTool.columnTool;
-    if (!columnTool) return;
+  repositionColumnTool() {
     let col = this.builder.activeCol;
     if (!col) return;
+    let row = col.parentNode;
 
-    if (transition) {
-      columnTool.style.transition = 'all 100ms ease';
+    if (!col.parentNode) {
+      // when column has just been deleted
+      row = this.rowSelected();
+    }
+
+    this.colTool = row.querySelector('.is-col-tool');
+
+    if (!col.parentNode) {
+      // when column has just been deleted
+      this.colTool.style.display = 'none';
+    }
+
+    this.colTool.style.left = col.offsetLeft + 'px'; // if columnMore is opened
+
+    const columnMore = this.builder.builderStuff.querySelector('.columnmore.active');
+
+    if (columnMore) {
+      const btnCellMore = this.colTool.querySelector('.cell-more');
+      columnMore.classList.add('transition1');
       setTimeout(() => {
-        columnTool.style.top = col.getBoundingClientRect().top - 29 + this.builder.win.pageYOffset + 'px';
-        columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+        let top, left;
+
+        if (!this.builder.iframe) {
+          top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
+          left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
+        } else {
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+          top = btnCellMore.getBoundingClientRect().top + adjY;
+          left = btnCellMore.getBoundingClientRect().left + adjX;
+        }
+
+        columnMore.style.top = top + 35 + 'px';
+        columnMore.style.left = left - 7 + 'px';
         setTimeout(() => {
-          columnTool.style.transition = '';
-        }, 100);
-      }, 10);
-    } else {
-      columnTool.style.top = col.getBoundingClientRect().top - 29 + this.builder.win.pageYOffset + 'px';
-      columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+          columnMore.classList.remove('transition1');
+        }, 300);
+      }, 30);
     }
   }
 
+  hideColumnTool() {
+    let tools = this.builder.doc.querySelectorAll('.is-col-tool');
+    tools.forEach(tool => {
+      tool.style.display = 'none';
+    });
+  }
+
   isTouchSupport() {
     /*
     if(('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
@@ -6378,7 +6412,6 @@ class Util {
         <li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="200,200i,600,600i,700,700i,800,800i,900,900i"><div></div><img src="${font_nunito}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="400,400i,700"><div></div><img src="${font_old_standard_tt}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="300,400,600,800"><div></div><img src="${font_open_sans}"></div>
-        <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans Condensed, sans-serif" data-font-style="300,300i,700"><div></div><img src="${font_open_sans_condensed}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oranienbaum, serif"><div></div><img src="${font_oranienbaum}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="300,400,700"><div></div><img src="${font_oswald}"></div>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="300,700"><div></div><img src="${font_oxygen}"></div>
@@ -6600,7 +6633,6 @@ class Util {
         <li role="option" tabindex="0" data-provider="google" data-font-family="Nunito, sans-serif" data-font-style="200,200i,600,600i,700,700i,800,800i,900,900i"><div></div><img src="${path}nunito.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Old Standard TT, serif" data-font-style="400,400i,700"><div></div><img src="${path}old_standard_tt.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans, sans-serif" data-font-style="300,400,600,800"><div></div><img src="${path}open_sans.png"></li>
-        <li role="option" tabindex="0" data-provider="google" data-font-family="Open Sans Condensed, sans-serif" data-font-style="300,300i,700"><div></div><img src="${path}open_sans_condensed.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oranienbaum, serif"><div></div><img src="${path}oranienbaum.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oswald, sans-serif" data-font-style="300,400,700"><div></div><img src="${path}oswald.png"></li>
         <li role="option" tabindex="0" data-provider="google" data-font-family="Oxygen, sans-serif" data-font-style="300,700"><div></div><img src="${path}oxygen.png"></li>
@@ -14837,10 +14869,7 @@ class HtmlUtil {
 
       this.builder.cleanHtmlFormatting = false; //Change to row selection
 
-      dom$h.removeClass(row, 'row-outline'); //Hide Column tool
-
-      let columnTool = builderStuff.querySelector('.is-column-tool');
-      dom$h.removeClass(columnTool, 'active');
+      dom$h.removeClass(row, 'row-outline');
     }
 
     if (mode === 'full') {
@@ -15189,6 +15218,8 @@ class HtmlUtil {
     dom$h.removeAttributes(elms, 'gray');
     elms = tmp.querySelectorAll('[rowoutline]');
     dom$h.removeAttributes(elms, 'rowoutline');
+    elms = tmp.querySelectorAll('[hidecolumntool]');
+    dom$h.removeAttributes(elms, 'hidecolumntool');
     elms = tmp.querySelectorAll('[grayoutline]');
     dom$h.removeAttributes(elms, 'grayoutline');
     elms = tmp.querySelectorAll('[hideoutline]');
@@ -15204,6 +15235,7 @@ class HtmlUtil {
     elms = tmp.querySelectorAll('[gridoutline]');
     dom$h.removeAttributes(elms, 'gridoutline');
     dom$h.removeElements(tmp.querySelectorAll('.is-row-tool'));
+    dom$h.removeElements(tmp.querySelectorAll('.is-col-tool'));
     dom$h.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
     dom$h.removeElements(tmp.querySelectorAll('.ovl'));
     dom$h.removeElements(tmp.querySelectorAll('.row-add-initial')); //Extra cleaning
@@ -15435,6 +15467,7 @@ class UndoRedo {
     dom.removeAttributes(elms, 'data-click');
     dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
     dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
+    dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
     dom.removeElements(tmp.querySelectorAll('.ovl'));
     dom.removeElements(tmp.querySelectorAll('.row-add-initial')); //ContentBox
 
@@ -17409,12 +17442,10 @@ class Grid {
     this.builderStuff = builderStuff;
     const dom = this.builder.dom;
     this.dom = dom;
-    this.columnTool = new ColumnTool$1(builder);
     this.rowTool = new RowTool$1(builder);
   }
 
   moveColumnPrevious() {
-    let columnTool = this.columnTool;
     let util = this.util;
     const cell = util.cellSelected();
     if (!cell) return;
@@ -17422,13 +17453,11 @@ class Grid {
     if (cell.previousElementSibling) {
       this.builder.uo.saveForUndo();
       cell.parentElement.insertBefore(cell, cell.previousElementSibling);
-      columnTool.position(cell);
       this.builder.opts.onChange();
     }
   }
 
   moveColumnNext() {
-    let columnTool = this.columnTool;
     let util = this.util;
     const cell = util.cellSelected();
     if (!cell) return;
@@ -17437,26 +17466,24 @@ class Grid {
     if (cellnext) {
       this.builder.uo.saveForUndo();
       cell.parentElement.insertBefore(cellnext, cell);
-      columnTool.position(cell);
       this.builder.opts.onChange();
     }
   }
 
   moveColumnUp() {
     let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     const cell = util.cellSelected();
     if (!cell) return;
     let row = cell.parentNode;
-    let num = 2; //is-row-tool & is-rowadd-tool
+    let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
 
     if (row.querySelector('.is-row-overlay')) {
-      num = 3; //is-row-tool, is-rowadd-tool & is-row-overlay
+      num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
     }
 
     if (row.childElementCount - num === 1) {
-      //-num => minus is-row-tool, is-rowadd-tool & is-row-overlay
+      //-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
       if (row.previousElementSibling) {
         let maxCols = 4;
 
@@ -17469,7 +17496,6 @@ class Grid {
           this.builder.uo.saveForUndo(); //Move row up
 
           row.parentNode.insertBefore(row, row.previousElementSibling);
-          columnTool.position(cell);
           this.builder.opts.onChange();
           return;
         } else {
@@ -17479,7 +17505,10 @@ class Grid {
           row.previousElementSibling.removeChild(tool); //remove next row tool
 
           tool = row.previousElementSibling.querySelector('.is-rowadd-tool');
-          row.previousElementSibling.removeChild(tool); //remove next row tool
+          row.previousElementSibling.removeChild(tool); //remove
+
+          tool = row.previousElementSibling.querySelector('.is-col-tool');
+          row.previousElementSibling.removeChild(tool); //remove
 
           row.previousElementSibling.appendChild(cell); //add
 
@@ -17489,7 +17518,6 @@ class Grid {
           let builderActive = this.builder.doc.querySelector('.builder-active');
           builder.applyBehaviorOn(builderActive);
           setTimeout(() => {
-            columnTool.position(cell);
             cell.click(); //refresh active cell/row
           }, 30);
           this.builder.opts.onChange();
@@ -17508,7 +17536,6 @@ class Grid {
       let builderActive = this.builder.doc.querySelector('.builder-active');
       builder.applyBehaviorOn(builderActive);
       setTimeout(() => {
-        columnTool.position(cell);
         cell.click(); //refresh active cell/row
       }, 30);
       this.builder.opts.onChange();
@@ -17523,16 +17550,15 @@ class Grid {
 
   moveColumnDown() {
     let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom;
     const cell = util.cellSelected();
     if (!cell) return;
     let row = cell.parentNode;
-    let num = 2; //is-row-tool & is-rowadd-tool
+    let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
 
     if (row.querySelector('.is-row-overlay')) {
-      num = 3; //is-row-tool, is-rowadd-tool & is-row-overlay
+      num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
     }
 
     if (row.childElementCount - num === 1) {
@@ -17549,7 +17575,6 @@ class Grid {
           this.builder.uo.saveForUndo(); //Move row down
 
           row.parentNode.insertBefore(row.nextElementSibling, row);
-          columnTool.position(cell);
           this.builder.opts.onChange();
           return;
         } else {
@@ -17559,7 +17584,10 @@ class Grid {
           row.nextElementSibling.removeChild(tool); //remove next row tool
 
           tool = row.nextElementSibling.querySelector('.is-rowadd-tool');
-          row.nextElementSibling.removeChild(tool); //remove next row tool
+          row.nextElementSibling.removeChild(tool); //remove
+
+          tool = row.nextElementSibling.querySelector('.is-col-tool');
+          row.nextElementSibling.removeChild(tool); //remove
 
           row.nextElementSibling.appendChild(cell); //add
 
@@ -17569,7 +17597,6 @@ class Grid {
           let builderActive = this.builder.doc.querySelector('.builder-active');
           builder.applyBehaviorOn(builderActive);
           setTimeout(() => {
-            columnTool.position(cell);
             cell.click(); //refresh active cell/row
           }, 30);
           this.builder.opts.onChange();
@@ -17588,7 +17615,6 @@ class Grid {
       let builderActive = this.builder.doc.querySelector('.builder-active');
       builder.applyBehaviorOn(builderActive);
       setTimeout(() => {
-        columnTool.position(cell);
         cell.click(); //refresh active cell/row
       }, 30);
       this.builder.opts.onChange();
@@ -17603,7 +17629,6 @@ class Grid {
 
   duplicateColumn() {
     let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom;
     const cell = util.cellSelected();
@@ -17619,10 +17644,10 @@ class Grid {
     }
 
     let row = cell.parentNode;
-    let num = 2; //is-row-tool & is-rowadd-tool
+    let num = 3;
 
     if (row.querySelector('.is-row-overlay')) {
-      num = 3; //is-row-tool, is-rowadd-tool & is-row-overlay
+      num = 4;
     }
 
     let maxCols = 4;
@@ -17632,7 +17657,6 @@ class Grid {
     }
 
     if (row.childElementCount >= maxCols + num) {
-      //+2 => is-row-tool & is-rowadd-tool
       alert(util.out('You have reached the maximum number of columns'));
       return false;
     }
@@ -17643,32 +17667,27 @@ class Grid {
     let builderActive = this.builder.doc.querySelector('.builder-active');
     builder.applyBehaviorOn(builderActive);
     setTimeout(() => {
-      columnTool.position(cell);
       cell.click(); //refresh active cell/row
     }, 30);
     this.builder.opts.onChange();
   }
 
   removeColumn() {
-    let columnTool = this.columnTool;
     let util = this.util;
     const cell = util.cellSelected();
     if (!cell) return;
     let row = cell.parentNode;
-    let num = 2; //is-row-tool & is-rowadd-tool
+    let num = 3;
 
     if (row.querySelector('.is-row-overlay')) {
-      num = 3; //is-row-tool, is-rowadd-tool & is-row-overlay
+      num = 4;
     }
 
-    columnTool.hide(); //Hide Column tool
-
     util.confirm(util.out('Are you sure you want to delete this block?'), ok => {
       if (ok) {
         this.builder.uo.saveForUndo();
 
         if (row.childElementCount - num === 1) {
-          //-2 => minus is-row-tool & is-rowadd-tool
           row.parentNode.removeChild(row);
           util.checkEmpty();
         } else {
@@ -17678,18 +17697,12 @@ class Grid {
 
         util.clearActiveCell();
         this.builder.opts.onChange();
-      } else {
-        setTimeout(() => {
-          // columnTool.position(cell);
-          columnTool.show();
-        }, 30);
       }
     });
   }
 
   increaseColumn() {
     let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom;
     const cell = util.cellSelected();
@@ -17726,7 +17739,6 @@ class Grid {
                   dom.addClass(cell, group[j + 1][0]);
                   dom.addClass(cellnext, group[j + 1][1]);
                   dom.addClass(cellnext2, group[j + 1][2]);
-                  columnTool.position(cell);
                   this.builder.opts.onChange();
                   return;
                 }
@@ -17748,7 +17760,6 @@ class Grid {
                 dom.removeClass(cellnext, group[j][1]);
                 dom.addClass(cell, group[j + 1][0]);
                 dom.addClass(cellnext, group[j + 1][1]);
-                columnTool.position(cell);
                 this.builder.opts.onChange();
                 return;
               }
@@ -17757,7 +17768,6 @@ class Grid {
         }
       }
 
-      columnTool.position(cell);
       return;
     } //others (12 columns grid)       
 
@@ -17845,7 +17855,6 @@ class Grid {
           dom.addClass(cellnext, colClass[10]);
         }
 
-        columnTool.position(cell);
         this.builder.opts.onChange();
       }
     }
@@ -17853,7 +17862,6 @@ class Grid {
 
   decreaseColumn() {
     let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom;
     const cell = util.cellSelected();
@@ -17890,7 +17898,6 @@ class Grid {
                   dom.addClass(cell, group[j - 1][0]);
                   dom.addClass(cellnext, group[j - 1][1]);
                   dom.addClass(cellnext2, group[j - 1][2]);
-                  columnTool.position(cell);
                   this.builder.opts.onChange();
                   return;
                 }
@@ -17912,7 +17919,6 @@ class Grid {
                 dom.removeClass(cellnext, group[j][1]);
                 dom.addClass(cell, group[j - 1][0]);
                 dom.addClass(cellnext, group[j - 1][1]);
-                columnTool.position(cell);
                 this.builder.opts.onChange();
                 return;
               }
@@ -17921,7 +17927,6 @@ class Grid {
         }
       }
 
-      columnTool.position(cell);
       return;
     } //others (12 columns grid)       
     // const rowClass = builder.opts.row; //row
@@ -18011,7 +18016,6 @@ class Grid {
           dom.addClass(cellnext, colClass[11]);
         }
 
-        columnTool.position(cell);
         this.builder.opts.onChange();
       }
     }
@@ -18020,7 +18024,6 @@ class Grid {
 
   removeRow() {
     // let builder = this.builder;
-    // let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom; // const cell = util.cellSelected();
     // if(!cell) return;
@@ -18038,8 +18041,6 @@ class Grid {
     if (!row) return; //Change to row selection
 
     dom.removeClass(row, 'row-outline');
-    this.columnTool.hide(); //Hide Column tool
-
     util.confirm(util.out('Are you sure you want to delete this block?'), ok => {
       // const cell = util.cellSelected();
       // if(!cell) return;
@@ -18066,7 +18067,6 @@ class Grid {
 
   moveRowUp() {
     // let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom; // const cell = util.cellSelected();
     // if(!cell) return;
@@ -18084,7 +18084,6 @@ class Grid {
     if (!row) return; //Change to row selection
 
     dom.removeClass(row, 'row-outline');
-    columnTool.hide(); //Hide Column tool
 
     if (row.previousElementSibling) {
       this.builder.uo.saveForUndo();
@@ -18114,7 +18113,6 @@ class Grid {
 
   moveRowDown() {
     // let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom; // const cell = util.cellSelected();
     // if(!cell) return;
@@ -18132,7 +18130,6 @@ class Grid {
     if (!row) return; //Change to row selection
 
     dom.removeClass(row, 'row-outline');
-    columnTool.hide(); //Hide Column tool
 
     if (row.nextElementSibling) {
       this.builder.uo.saveForUndo();
@@ -18162,7 +18159,6 @@ class Grid {
 
   duplicateRow() {
     let builder = this.builder;
-    let columnTool = this.columnTool;
     let util = this.util;
     let dom = this.dom; // const cell = util.cellSelected();
     // if(!cell) return;
@@ -18180,12 +18176,11 @@ class Grid {
     if (!row) return; //Change to row selection
 
     dom.removeClass(row, 'row-outline');
-    columnTool.hide(); //Hide Column tool
-
     this.builder.uo.saveForUndo(); //Clone row & cleanup attached tool & event
 
     const rowElement = row.cloneNode(true);
     rowElement.removeChild(rowElement.querySelector('.is-row-tool'));
+    rowElement.removeChild(rowElement.querySelector('.is-col-tool'));
     let cols = dom.elementChildren(rowElement);
     cols.forEach(col => {
       col.removeAttribute('data-click');
@@ -18207,22 +18202,6 @@ class Grid {
     builder.applyBehaviorOn(builderActive);
     this.rowTool.position(rowElement);
     this.builder.opts.onChange();
-  } // Utilities
-
-
-  refreshColumnTool(cell) {
-    let columnTool = this.columnTool;
-    columnTool.position(cell);
-  }
-
-  showColumnTool() {
-    let columnTool = this.columnTool;
-    columnTool.show();
-  }
-
-  hideColumnTool() {
-    let columnTool = this.columnTool;
-    columnTool.hide();
   }
 
 }
@@ -18281,76 +18260,6 @@ class RowTool$1 {
 
 }
 
-class ColumnTool$1 {
-  constructor(builder) {
-    this.builder = builder;
-    const dom = this.builder.dom;
-    this.dom = dom;
-  }
-
-  position(col) {
-    let dom = this.dom;
-    const builderStuff = this.builder.builderStuff; // this.columnTool = builderStuff.querySelector('.is-column-tool');
-
-    if (!this.builder.iframe) {
-      this.columnTool = builderStuff.querySelector('.is-column-tool');
-    } else {
-      this.columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
-    }
-
-    this.columnMore = builderStuff.querySelector('.columnmore');
-    dom.addClass(this.columnMore, 'transition1');
-    setTimeout(() => {
-      this.columnTool.style.top = col.getBoundingClientRect().top - 29 + this.builder.win.pageYOffset + 'px';
-      this.columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
-      let top, left;
-
-      if (!this.builder.iframe) {
-        top = parseInt(this.columnTool.style.top);
-        left = parseInt(this.columnTool.style.left);
-      } else {
-        let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-        let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-        top = parseInt(this.columnTool.style.top) - this.builder.win.pageYOffset + adjY;
-        left = parseInt(this.columnTool.style.left) - this.builder.win.pageXOffset + adjX;
-      }
-
-      this.columnMore.style.top = top + 35 + 'px';
-      this.columnMore.style.left = left + 19 + 'px';
-      setTimeout(() => {
-        dom.removeClass(this.columnMore, 'transition1');
-      }, 300);
-    }, 30);
-  }
-
-  hide() {
-    let dom = this.dom;
-    const builderStuff = this.builder.builderStuff;
-
-    if (!this.builder.iframe) {
-      this.columnTool = builderStuff.querySelector('.is-column-tool');
-    } else {
-      this.columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
-    }
-
-    dom.removeClass(this.columnTool, 'active');
-  }
-
-  show() {
-    let dom = this.dom;
-    const builderStuff = this.builder.builderStuff;
-
-    if (!this.builder.iframe) {
-      this.columnTool = builderStuff.querySelector('.is-column-tool');
-    } else {
-      this.columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
-    }
-
-    dom.addClass(this.columnTool, 'active');
-  }
-
-}
-
 /*
 Draggable
 Insipred by: https://www.kirupa.com/html5/drag.htm
@@ -49586,18 +49495,7 @@ class Image$1 {
           document.selection.empty();
         } else {
           window.getSelection().removeAllRanges();
-        } // Hide column tool
-
-
-        let columnTool;
-
-        if (!this.builder.iframe) {
-          columnTool = builderStuff.querySelector('.is-column-tool');
-        } else {
-          columnTool = contentStuff.querySelector('.is-column-tool');
         }
-
-        dom.removeClass(columnTool, 'active');
       }).on('resizeEnd', ({
         target
       }) => {
@@ -49642,17 +49540,7 @@ class Image$1 {
           target.setAttribute('data-resized', 0);
         }, 300); //Trigger Change event
 
-        this.builder.opts.onChange(); // Show column tool
-
-        let columnTool;
-
-        if (!this.builder.iframe) {
-          columnTool = builderStuff.querySelector('.is-column-tool');
-        } else {
-          columnTool = contentStuff.querySelector('.is-column-tool');
-        }
-
-        dom.addClass(columnTool, 'active');
+        this.builder.opts.onChange();
       });
       document.querySelector('.moveable-control-box').style.display = 'none';
       imageResizer.addEventListener('click', () => {
@@ -53504,6 +53392,7 @@ class Code {
           elms = tmpbuilder.querySelectorAll('[data-module-active]');
           dom.removeAttributes(elms, 'data-module-active');
           dom.removeElements(tmpbuilder.querySelectorAll('.is-row-tool'));
+          dom.removeElements(tmpbuilder.querySelectorAll('.is-col-tool'));
           dom.removeElements(tmpbuilder.querySelectorAll('.is-rowadd-tool'));
           dom.removeElements(tmpbuilder.querySelectorAll('.ovl'));
           dom.removeElements(tmpbuilder.querySelectorAll('.row-add-initial'));
@@ -55153,7 +55042,13 @@ class RowTool {
                 <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-            </div>`;
+            </div>
+            <div class="is-tool is-col-tool">
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+            </div>
+            `;
       dom.appendHtml(row, html);
       rowtool = row.querySelector('.is-row-tool'); // Prepare for tooltip
 
@@ -55167,6 +55062,109 @@ class RowTool {
           this.builder.tooltip.set(elm, 5, 3, true);
         }
       });
+      let coltool = row.querySelector('.is-col-tool'); // Prepare for tooltip
+
+      elms = coltool.querySelectorAll('[title]');
+      Array.prototype.forEach.call(elms, elm => {
+        elm.setAttribute('data-title', elm.getAttribute('title'));
+
+        if (!this.builder.iframe) {
+          this.builder.tooltip.set(elm, 5, 3);
+        } else {
+          this.builder.tooltip.set(elm, 5, 3, true);
+        }
+      }); // Check for backward compatibility
+
+      let marginLeft = window.getComputedStyle(coltool, null).getPropertyValue('margin-left');
+
+      if (parseInt(marginLeft) === 0) {
+        this.builder.backwardCompatible();
+      }
+
+      const btnCellAdd = coltool.querySelector('.cell-add');
+      if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
+        let tabs = quickadd.querySelector('.is-pop-tabs');
+        tabs.style.display = 'flex';
+        let top, left;
+
+        if (!this.builder.iframe) {
+          top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
+          left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
+        } else {
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+          top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
+          left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
+        } // quickadd.style.display = 'flex';
+
+
+        util.showPop(quickadd, false, btnCellAdd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        //const h = quickadd.offsetHeight;
+
+        quickadd.style.top = top + 35 + 'px';
+        quickadd.style.left = left + 'px';
+        dom.removeClass(quickadd, 'arrow-bottom');
+        dom.removeClass(quickadd, 'arrow-left');
+        dom.removeClass(quickadd, 'arrow-right');
+        dom.removeClass(quickadd, 'center');
+        dom.removeClass(quickadd, 'right');
+        dom.addClass(quickadd, 'arrow-top');
+        dom.addClass(quickadd, 'left');
+        let val = quickadd.querySelector('.active').getAttribute('data-value');
+
+        if (val === 'left') {
+          quickadd.setAttribute('data-mode', 'cell-left');
+        } else {
+          quickadd.setAttribute('data-mode', 'cell-right');
+        }
+      });
+      const btnCellMore = coltool.querySelector('.cell-more');
+      if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        let top, left;
+
+        if (!this.builder.iframe) {
+          top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
+          left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
+        } else {
+          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
+          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
+          top = btnCellMore.getBoundingClientRect().top + adjY;
+          left = btnCellMore.getBoundingClientRect().left + adjX;
+        }
+
+        const columnMore = builderStuff.querySelector('.columnmore'); // columnMore.style.display = 'flex';
+
+        util.showPop(columnMore, false, btnCellMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        //const h = columnMore.offsetHeight;
+
+        columnMore.style.top = top + 35 + 'px';
+        columnMore.style.left = left - 7 + 'px';
+        dom.removeClass(columnMore, 'arrow-bottom');
+        dom.removeClass(columnMore, 'arrow-left');
+        dom.removeClass(columnMore, 'arrow-right');
+        dom.removeClass(columnMore, 'center');
+        dom.removeClass(columnMore, 'right');
+        dom.addClass(columnMore, 'arrow-top');
+        dom.addClass(columnMore, 'left');
+        const btnCellLocking = columnMore.querySelector('.cell-locking');
+
+        if (cell.hasAttribute('data-noedit')) {
+          dom.addClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>';
+        } else {
+          dom.removeClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock-off"></use></svg>';
+        }
+      });
+      const btnCellRemove = coltool.querySelector('.cell-remove');
+      if (btnCellRemove) dom.addEventListener(btnCellRemove, 'click', () => {
+        const grid = new Grid(this.builder);
+        grid.removeColumn();
+        util.clearControls();
+      });
       let btnGridEditor = rowtool.querySelector('.row-grideditor');
       if (btnGridEditor) dom.addEventListener(btnGridEditor, 'click', () => {
         const grideditor = builderStuff.querySelector('.grideditor');
@@ -55227,10 +55225,9 @@ class RowTool {
 
         if (!row) return; //Change to row selection
 
-        dom.removeClass(row, 'row-outline'); //Hide Column tool
+        dom.removeClass(row, 'row-outline'); //Hide Column tool (new!)
 
-        let columnTool = builderStuff.querySelector('.is-column-tool');
-        dom.removeClass(columnTool, 'active'); // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
+        util.hideColumnTool(); // const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
         // const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
 
         let top, left;
@@ -57164,8 +57161,7 @@ class ColumnTool {
     this.util = util;
     const dom = this.builder.dom;
     this.dom = dom;
-    let columnTool = builderStuff.querySelector('.is-column-tool');
-    let columnMore;
+    let columnMore = builderStuff.querySelector('.is-pop.columnmore');
     let resizebutton = `
             <button type="button" title="${util.out('Increase')}" class="cell-increase"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-increase"></use></svg></span>${util.out('Increase')}</button>
             <button type="button" title="${util.out('Decrease')}" class="cell-decrease"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-decrease"></use></svg></span>${util.out('Decrease')}</button>      
@@ -57176,8 +57172,10 @@ class ColumnTool {
                 <span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
             </button>`;
 
-    if (!columnTool) {
-      let html = `<div class="is-tool is-column-tool">
+    if (!columnMore) {
+      // .is-column-tool here is not used anymore and is replaced with the one in rowtool.js
+      let html = `
+            <div class="is-tool is-column-tool">
                 <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
@@ -57495,10 +57493,8 @@ class ColumnTool {
       dom.appendHtml(builderStuff, html);
 
       if (!this.builder.iframe) {
-        columnTool = builderStuff.querySelector('.is-column-tool');
         this.lockIndicator = builderStuff.querySelector('.is-locked-indicator');
       } else {
-        columnTool = this.builder.contentStuff.querySelector('.is-column-tool');
         this.lockIndicator = this.builder.contentStuff.querySelector('.is-locked-indicator');
       }
 
@@ -57506,100 +57502,8 @@ class ColumnTool {
       this.cellSettings = builderStuff.querySelector('.is-modal.columnsettings');
       this.divCellClick = builderStuff.querySelector('#divCellClick');
       this.divCellGeneral = builderStuff.querySelector('#divCellGeneral');
-      const quickadd = renderQuickAdd(builder); // Prepare for tooltip
-
-      let elms = columnTool.querySelectorAll('[title]');
-      Array.prototype.forEach.call(elms, elm => {
-        elm.setAttribute('data-title', elm.getAttribute('title'));
-      }); // elms = columnMore.querySelectorAll('[title]');
-      // Array.prototype.forEach.call(elms, (elm) => {
-      //     elm.setAttribute('data-title',elm.getAttribute('title'));
-      // });
-      // Add column
-
-      let btnCellAdd = columnTool.querySelector('.cell-add');
-      dom.addEventListener(btnCellAdd, 'click', () => {
-        let cell = util.cellSelected();
-        if (!cell) return;
-        let tabs = quickadd.querySelector('.is-pop-tabs');
-        tabs.style.display = 'flex';
-        let top, left;
-
-        if (!this.builder.iframe) {
-          top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
-          left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
-        } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
-          left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
-        } // quickadd.style.display = 'flex';
-
-
-        util.showPop(quickadd, false, btnCellAdd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-        //const h = quickadd.offsetHeight;
-
-        quickadd.style.top = top + 35 + 'px';
-        quickadd.style.left = left + 'px';
-        dom.removeClass(quickadd, 'arrow-bottom');
-        dom.removeClass(quickadd, 'arrow-left');
-        dom.removeClass(quickadd, 'arrow-right');
-        dom.removeClass(quickadd, 'center');
-        dom.removeClass(quickadd, 'right');
-        dom.addClass(quickadd, 'arrow-top');
-        dom.addClass(quickadd, 'left');
-        let val = quickadd.querySelector('.active').getAttribute('data-value');
-
-        if (val === 'left') {
-          quickadd.setAttribute('data-mode', 'cell-left');
-        } else {
-          quickadd.setAttribute('data-mode', 'cell-right');
-        }
-      }); // More
-
-      const btnCellMore = columnTool.querySelector('.cell-more');
-      dom.addEventListener(btnCellMore, 'click', () => {
-        let cell = util.cellSelected();
-        if (!cell) return;
-        let top, left;
-
-        if (!this.builder.iframe) {
-          top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
-          left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
-        } else {
-          let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
-          let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
-          top = btnCellMore.getBoundingClientRect().top + adjY;
-          left = btnCellMore.getBoundingClientRect().left + adjX;
-        } // columnMore.style.display = 'flex';
-
-
-        util.showPop(columnMore, false, btnCellMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-        //const h = columnMore.offsetHeight;
-
-        columnMore.style.top = top + 35 + 'px';
-        columnMore.style.left = left - 7 + 'px';
-        dom.removeClass(columnMore, 'arrow-bottom');
-        dom.removeClass(columnMore, 'arrow-left');
-        dom.removeClass(columnMore, 'arrow-right');
-        dom.removeClass(columnMore, 'center');
-        dom.removeClass(columnMore, 'right');
-        dom.addClass(columnMore, 'arrow-top');
-        dom.addClass(columnMore, 'left');
-        const btnCellLocking = this.columnMore.querySelector('.cell-locking');
-
-        if (cell.hasAttribute('data-noedit')) {
-          dom.addClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>';
-        } else {
-          dom.removeClass(btnCellLocking, 'on'); // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock-off"></use></svg>';
-        }
-      }); // Delete column
-
-      let elm = columnTool.querySelector('.cell-remove');
-      dom.addEventListener(elm, 'click', () => {
-        this.grid.removeColumn();
-        util.clearControls();
-      }); // Move Previous
+      renderQuickAdd(builder);
+      let elms, elm; // Move Previous
 
       elm = columnMore.querySelector('.cell-prev');
       dom.addEventListener(elm, 'click', () => {
@@ -57633,6 +57537,7 @@ class ColumnTool {
         Array.from(row.children).map(item => {
           if (item.classList.contains('is-row-tool')) return;
           if (item.classList.contains('is-rowadd-tool')) return;
+          if (item.classList.contains('is-col-tool')) return;
           if (item.style.width) needed = true;
         });
 
@@ -57640,6 +57545,7 @@ class ColumnTool {
           Array.from(row.children).map(item => {
             if (item.classList.contains('is-row-tool')) return;
             if (item.classList.contains('is-rowadd-tool')) return;
+            if (item.classList.contains('is-col-tool')) return;
             item.style.width = '';
             item.style.flex = '';
             item.style.height = '';
@@ -57653,6 +57559,7 @@ class ColumnTool {
         Array.from(cell.parentNode.children).map(item => {
           if (item.classList.contains('is-row-tool')) return;
           if (item.classList.contains('is-rowadd-tool')) return;
+          if (item.classList.contains('is-col-tool')) return;
 
           if (item.getAttribute('data-module')) {
             util.refreshModuleLayout(item);
@@ -57670,6 +57577,7 @@ class ColumnTool {
         Array.from(row.children).map(item => {
           if (item.classList.contains('is-row-tool')) return;
           if (item.classList.contains('is-rowadd-tool')) return;
+          if (item.classList.contains('is-col-tool')) return;
           if (item.style.width) needed = true;
         });
 
@@ -57677,6 +57585,7 @@ class ColumnTool {
           Array.from(row.children).map(item => {
             if (item.classList.contains('is-row-tool')) return;
             if (item.classList.contains('is-rowadd-tool')) return;
+            if (item.classList.contains('is-col-tool')) return;
             item.style.width = '';
             item.style.flex = '';
             item.style.height = '';
@@ -57690,6 +57599,7 @@ class ColumnTool {
         Array.from(cell.parentNode.children).map(item => {
           if (item.classList.contains('is-row-tool')) return;
           if (item.classList.contains('is-rowadd-tool')) return;
+          if (item.classList.contains('is-col-tool')) return;
 
           if (item.getAttribute('data-module')) {
             util.refreshModuleLayout(item);
@@ -58814,7 +58724,6 @@ class ColumnTool {
       });
     }
 
-    this.columnTool = columnTool;
     this.columnMore = columnMore;
   }
 
@@ -59385,10 +59294,11 @@ class ColumnTool {
   }
 
   click(col) {
-    const dom = this.dom;
-    dom.addClass(this.columnTool, 'active');
-    this.columnTool.style.top = col.getBoundingClientRect().top - 29 + this.builder.win.pageYOffset + 'px';
-    this.columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+    const dom = this.dom; //---- New Col Tool ----
+
+    this.columnTool = col.parentNode.querySelector('.is-col-tool');
+    this.columnTool.style.left = col.offsetLeft + 'px'; //---- /New Col Tool ----
+
     const btnIncrease = this.columnMore.querySelector('.cell-increase');
     const btnDecrease = this.columnMore.querySelector('.cell-decrease');
     let nogrid = dom.parentsHasAttribute(col, 'nogrid');
@@ -59448,14 +59358,14 @@ class ColumnTool {
       this.columnTool.querySelector('.cell-add').removeAttribute('disabled');
       this.columnTool.querySelector('.cell-remove').removeAttribute('disabled');
       let row = col.parentNode;
-      let num = 2; //is-row-tool & is-rowadd-tool
+      let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
 
       if (row.querySelector('.is-row-overlay')) {
-        num = 3; //is-row-tool, is-rowadd-tool & is-row-overlay
+        num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
       }
 
       if (row.childElementCount - num === 1) {
-        //-num => minus is-row-tool, is-rowadd-tool & is-row-overlay
+        //-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
         this.columnMore.querySelector('.cell-prev').style.display = 'none';
         this.columnMore.querySelector('.cell-next').style.display = 'none';
         if (btnIncrease) btnIncrease.style.display = 'none';
@@ -59578,18 +59488,6 @@ class ColumnTool {
     }
   }
 
-  refreshColumnTool(cell) {
-    this.grid.refreshColumnTool(cell);
-  }
-
-  showColumnTool(cell) {
-    this.grid.showColumnTool(cell);
-  }
-
-  hideColumnTool() {
-    this.grid.hideColumnTool();
-  }
-
 }
 
 const dom$f = new Dom();
@@ -64506,18 +64404,13 @@ class ElementTool {
           if (cell) {
             let row = cell.parentNode;
 
-            if (cell.childElementCount === 0 && row.childElementCount === 3) {
+            if (cell.childElementCount === 0 && row.childElementCount === 4) {
+              // 4 => col + tools
               row.parentNode.removeChild(row);
-              let columnTool = builderStuff.querySelector('.is-column-tool'); // quick access
-
-              dom.removeClass(columnTool, 'active');
               util.checkEmpty();
             } else if (cell.childElementCount === 0) {
               row.removeChild(cell);
               util.fixLayout(row);
-              let columnTool = builderStuff.querySelector('.is-column-tool'); // // quick access
-
-              dom.removeClass(columnTool, 'active');
             }
           } // Add spacer to empty subblock
 
@@ -65626,22 +65519,16 @@ class Preferences {
   }
 
   setColumnTool(hidecolumntool) {
-    const builderStuff = this.builder.builderStuff;
+    const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
 
     if (hidecolumntool) {
-      builderStuff.setAttribute('hidecolumntool', '');
+      Array.prototype.forEach.call(builders, builder => {
+        builder.setAttribute('hidecolumntool', '');
+      });
     } else {
-      builderStuff.removeAttribute('hidecolumntool', '');
-    }
-
-    if (this.builder.iframe) {
-      const contentStuff = this.builder.contentStuff;
-
-      if (hidecolumntool) {
-        contentStuff.setAttribute('hidecolumntool', '');
-      } else {
-        contentStuff.removeAttribute('hidecolumntool', '');
-      }
+      Array.prototype.forEach.call(builders, builder => {
+        builder.removeAttribute('hidecolumntool');
+      });
     }
   }
 
@@ -67288,12 +67175,14 @@ class Rte {
       Array.prototype.forEach.call(tools, tool => {
         tool.style.display = '';
       });
-      let tool = this.builder.doc.querySelector('.is-column-tool');
-      tool.style.display = 'none';
       tools = this.builder.doc.querySelectorAll('.is-row-tool');
       tools.forEach(tool => {
         tool.style.display = 'none';
       });
+      tools = this.builder.doc.querySelectorAll('.is-col-tool');
+      tools.forEach(tool => {
+        tool.style.display = 'none';
+      });
       tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
       tools.forEach(tool => {
         tool.style.opacity = 0;
@@ -67321,15 +67210,6 @@ class Rte {
 
 
         this.builder.elmTool.repositionElementTool();
-        let col = this.builder.activeCol;
-        let tool = this.builder.doc.querySelector('.is-column-tool');
-        tool.style.display = '';
-
-        if (col) {
-          tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
-          tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
-        }
-
         let tools = this.builder.doc.querySelectorAll('.is-row-tool');
         tools.forEach(tool => {
           tool.style.display = '';
@@ -67338,6 +67218,10 @@ class Rte {
         tools.forEach(tool => {
           tool.style.opacity = '';
         });
+        tools = this.builder.doc.querySelectorAll('.is-col-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
+        });
 
         if (this.builder.onZoomEnd) {
           let val = this.rteZoomSlider.value;
@@ -67370,12 +67254,14 @@ class Rte {
       Array.prototype.forEach.call(tools, tool => {
         tool.style.display = '';
       });
-      let tool = this.builder.doc.querySelector('.is-column-tool');
-      tool.style.display = 'none';
       tools = this.builder.doc.querySelectorAll('.is-row-tool');
       tools.forEach(tool => {
         tool.style.display = 'none';
       });
+      tools = this.builder.doc.querySelectorAll('.is-col-tool');
+      tools.forEach(tool => {
+        tool.style.display = 'none';
+      });
       tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
       tools.forEach(tool => {
         tool.style.opacity = 0;
@@ -67403,15 +67289,6 @@ class Rte {
 
 
         this.builder.elmTool.repositionElementTool();
-        let col = this.builder.activeCol;
-        let tool = this.builder.doc.querySelector('.is-column-tool');
-        tool.style.display = '';
-
-        if (col) {
-          tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
-          tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
-        }
-
         let tools = this.builder.doc.querySelectorAll('.is-row-tool');
         tools.forEach(tool => {
           tool.style.display = '';
@@ -67420,6 +67297,10 @@ class Rte {
         tools.forEach(tool => {
           tool.style.opacity = '';
         });
+        tools = this.builder.doc.querySelectorAll('.is-col-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
+        });
 
         if (this.builder.onZoomEnd) {
           let val = this.rteZoomSlider.value;
@@ -72738,6 +72619,7 @@ class Resize {
         Array.from(col.parentNode.children).map(item => {
           if (item.classList.contains('is-row-tool')) return;
           if (item.classList.contains('is-rowadd-tool')) return;
+          if (item.classList.contains('is-col-tool')) return;
           if (item === col) return;
           numOfCols++;
         });
@@ -72750,7 +72632,8 @@ class Resize {
             let otherWidth = 0;
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
+              if (item.classList.contains('is-rowadd-tool')) return;
+              if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return;
               otherWidth += item.offsetWidth;
@@ -72766,7 +72649,8 @@ class Resize {
             // Or make others auto
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
+              if (item.classList.contains('is-rowadd-tool')) return;
+              if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return; // // item.style.width = '100%';
               // if(!item.getAttribute('data-module')) item.style.width = '100%';
@@ -72796,7 +72680,8 @@ class Resize {
             // New: if other cols has no width, set to 100%
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
+              if (item.classList.contains('is-rowadd-tool')) return;
+              if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return;
 
@@ -72820,6 +72705,7 @@ class Resize {
         Array.from(col.parentNode.children).map(item => {
           if (item.classList.contains('is-row-tool')) return;
           if (item.classList.contains('is-rowadd-tool')) return;
+          if (item.classList.contains('is-col-tool')) return;
           if (item === col) return;
           numOfCols++;
         });
@@ -72833,7 +72719,8 @@ class Resize {
             let otherWidth = 0;
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
+              if (item.classList.contains('is-rowadd-tool')) return;
+              if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item.classList.contains('row-tool')) return;
               if (item === col) return;
@@ -72850,7 +72737,8 @@ class Resize {
             // Or make others auto
             Array.from(col.parentNode.children).map(item => {
               if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
+              if (item.classList.contains('is-rowadd-tool')) return;
+              if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return; // // item.style.width = '100%';
               // if(!item.getAttribute('data-module')) item.style.width = '100%';
@@ -72880,7 +72768,8 @@ class Resize {
           let activeColumnWidth = 0;
           Array.from(col.parentNode.children).map(item => {
             if (item.classList.contains('is-row-tool')) return;
-            if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
+            if (item.classList.contains('is-rowadd-tool')) return;
+            if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
             // // Refresh Module
             // if(item.getAttribute('data-module')) {
             //     this.builder.util.refreshModuleLayout(item);
@@ -72903,6 +72792,7 @@ class Resize {
           Array.from(col.parentNode.children).map(item => {
             if (item.classList.contains('is-row-tool')) return;
             if (item.classList.contains('is-rowadd-tool')) return;
+            if (item.classList.contains('is-col-tool')) return;
 
             if (item.getAttribute('data-module')) {
               let moduleWidth = item.offsetWidth / row.offsetWidth * 100;
@@ -72918,7 +72808,8 @@ class Resize {
           col.style.height = '';
           Array.from(col.parentNode.children).map(item => {
             if (item.classList.contains('is-row-tool')) return;
-            if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
+            if (item.classList.contains('is-rowadd-tool')) return;
+            if (item.classList.contains('is-col-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
             if (item === col) return;
             item.style.height = '';
@@ -73529,6 +73420,8 @@ class ContentStuff {
         .row-active .is-row-tool {
             display:flex;
         }
+
+
         .row-outline .is-rowadd-tool, 
         .row-active .is-rowadd-tool {
             display:block;
@@ -73599,7 +73492,78 @@ class ContentStuff {
             outline:none;
         }
 
+        /* is-col-tool */
 
+        .row-active .is-col-tool {
+            display: flex;
+        }
+        .is-builder[rowoutline] .row-active .is-col-tool {
+            display: none;
+        }
+        .is-builder[hidecolumntool] .row-active .is-col-tool {
+            display: none;
+        }
+        
+
+        .is-tool.is-col-tool {
+            flex-direction: row;
+            margin-top: 0px;
+            margin-left: -1px;
+        }
+        .is-tool.is-col-tool button {
+            width: 25px;
+            height: 25px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .is-tool.is-col-tool .cell-add {
+            background: #0fcc52;
+        }
+        .is-tool.is-col-tool .cell-more {
+            background: rgba(216, 200, 6, 0.9);
+        }
+        .is-tool.is-col-tool .cell-remove {
+            background: rgba(255, 85, 4, 0.9);
+        }
+        .is-tool.is-col-tool svg {
+            width: 23px;
+            height: 23px;
+            fill: #fff;
+        }
+        .is-tool.is-col-tool .cell-more svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        
+        .is-builder[gray] .is-tool.is-col-tool {
+            background: rgba(243, 243, 243, 0.9);
+            flex-direction: row;
+            margin-top: -2px;
+        }
+        .is-builder[gray] .is-tool.is-col-tool button {
+            width: 27px;
+            height: 27px;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-add {
+            background: transparent;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-more {
+            background: transparent;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-remove {
+            background: transparent;
+        }
+        .is-builder[gray] .is-tool.is-col-tool svg {
+            width: 18px;
+            height: 18px;
+            fill: #000;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
+            width: 12px;
+            height: 12px;
+        }
 
 
         .is-builder[gridoutline] > div > div {
@@ -73876,7 +73840,8 @@ class ContentStuff {
             display: initial !important;
         }
         .is-section-tool svg,
-        .is-row-tool svg {
+        .is-row-tool svg,
+        .is-col-tool svg {
             display: initial !important;
         }
         
@@ -74824,7 +74789,6 @@ class ContentBuilder {
       var ret = oldget.apply(this, arguments);
 
       if (this.activeCol) {
-        // this.colTool.refreshColumnTool(this.activeCol);
         // Quick reposition column tool
         this.util.repositionColumnTool();
       }
@@ -75128,6 +75092,101 @@ class ContentBuilder {
     */
 
   }
+  /*
+  If latest npm is used, while local contentbuilder.css is still using the old version,
+  then add the newest css here, so the newest script from npm will  work fine.
+  backwardCompatible() is called by rowtool.js
+  */
+
+
+  backwardCompatible() {
+    let css = `
+        .row-active .is-col-tool {
+            display: flex;
+        }
+        .is-builder[rowoutline] .row-active .is-col-tool {
+            display: none;
+        }
+        .is-builder[hidecolumntool] .row-active .is-col-tool {
+            display: none;
+        }
+
+        .is-tool.is-col-tool {
+            flex-direction: row;
+            margin-top: 0px;
+            margin-left: -1px;
+        }
+        .is-tool.is-col-tool button {
+            width: 25px;
+            height: 25px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .is-tool.is-col-tool .cell-add {
+            background: #0fcc52;
+        }
+        .is-tool.is-col-tool .cell-more {
+            background: rgba(216, 200, 6, 0.9);
+        }
+        .is-tool.is-col-tool .cell-remove {
+            background: rgba(255, 85, 4, 0.9);
+        }
+        .is-tool.is-col-tool svg {
+            width: 23px;
+            height: 23px;
+            fill: #fff;
+        }
+        .is-tool.is-col-tool .cell-more svg {
+            width: 14px;
+            height: 14px;
+        }
+
+
+        .is-builder[gray] .is-tool.is-col-tool {
+            background: rgba(243, 243, 243, 0.9);
+            flex-direction: row;
+            top:-3px;
+            margin-top: 0px;
+            margin-left: -1px;
+        }
+        .is-builder[gray] .is-tool.is-col-tool button {
+            width: 27px;
+            height: 27px;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-add {
+            background: transparent;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-more {
+            background: transparent;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-remove {
+            background: transparent;
+        }
+        .is-builder[gray] .is-tool.is-col-tool svg {
+            width: 18px;
+            height: 18px;
+            fill: #000;
+        }
+        .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
+            width: 12px;
+            height: 12px;
+        }
+
+
+        .is-col-tool svg {
+            display: initial !important;
+        }
+        `;
+
+    if (!this.builderStuff.querySelector('style[data-rel="css-new"]')) {
+      this.builderStuff.insertAdjacentHTML('afterbegin', `
+            <style data-rel="css-new">
+                ${css}
+            </style>
+            `);
+    }
+  }
 
   setZoomOnControl(area) {
     const rowtools = area.querySelectorAll('.is-row-tool');
@@ -75135,6 +75194,12 @@ class ContentBuilder {
       rowtool.style.transform = `scale(${1 / this.opts.zoom})`;
       rowtool.style.transformOrigin = 'top';
     });
+    const coltools = area.querySelectorAll('.is-col-tool');
+    coltools.forEach(coltool => {
+      coltool.style.transform = `scale(${1 / this.opts.zoom})`;
+      coltool.style.transformOrigin = 'top left';
+      coltool.style.marginTop = `${-(27 / this.opts.zoom)}px`;
+    });
     const rowaddtools = area.querySelectorAll('.is-rowadd-tool button');
     rowaddtools.forEach(rowaddtool => {
       rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`; // rowtool.style.transformOrigin = 'top';
@@ -75239,7 +75304,7 @@ class ContentBuilder {
 
       const cols = this.dom.elementChildren(row);
       cols.forEach(col => {
-        if (this.dom.hasClass(col, 'is-row-tool') || this.dom.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
+        if (this.dom.hasClass(col, 'is-row-tool') || this.dom.hasClass(col, 'is-col-tool') || this.dom.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
         // For backward compatibility, replace:
         // - data-mode="readonly" with data-noedit
         // - data-mode="readonly-protected" with data-protected
@@ -75373,19 +75438,9 @@ class ContentBuilder {
         onStart: () => {
           this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change 
 
-          this.colTool.hideColumnTool();
           this.elmTool.hide();
         },
         onEnd: () => {
-          if (!this.opts.emailMode) {
-            if (this.dom.hasClass(this.activeCol.parentNode, 'row-outline')) {
-              //if not row selection, but col selection
-              //if(this.activeCol.parentNode.classList.contains('row-outline')) { //if not row selection, but col selection
-              this.colTool.refreshColumnTool(this.activeCol);
-              this.colTool.showColumnTool(this.activeCol);
-            }
-          }
-
           this.util.checkEmpty(); // for multiple instances check
         },
         onAdd: evt => {
@@ -75946,10 +76001,6 @@ class ContentBuilder {
 
   imageLoaded(obj) {
     obj.removeAttribute('onload');
-
-    if (this.activeCol) {
-      this.colTool.refreshColumnTool(this.activeCol);
-    }
   } // Module related
 
 
@@ -76618,6 +76669,7 @@ class ContentBuilder {
   }
 
   setUIColorRefresh() {
+    // All related with iframe style
     const util = this.util;
 
     if (!this.rte || !this.element) {
@@ -76748,7 +76800,11 @@ class ContentBuilder {
   }
 
   handleCellClick(col, e) {
-    if (this.cleanEditing) col.parentNode.querySelector('.is-row-tool').style.display = '';
+    if (this.cleanEditing) {
+      col.parentNode.querySelector('.is-row-tool').style.display = '';
+      col.parentNode.querySelector('.is-col-tool').style.display = '';
+    }
+
     this.lightboxOpen(col);
     const util = this.util;
     util.clearActiveCell();
@@ -77271,6 +77327,7 @@ class ContentBuilder {
     if (this.cleanEditing) {
       this.colTool.columnTool.classList.remove('active');
       col.parentNode.querySelector('.is-row-tool').style.display = 'none';
+      col.parentNode.querySelector('.is-col-tool').style.display = 'none';
     }
   }