From d0e120e974eef60a3e43ada9f82ab807d51af7da Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 13 Nov 2020 21:48:15 +0300
Subject: [PATCH] [DE][PE][SSE] Update bootstrap (Add new parameter in menu
 component 'display: static/dynamic', fix dropdowns into right panel)

---
 apps/common/main/lib/component/ColorButton.js |   2 +-
 .../main/lib/component/ComboBorderSize.js     |   8 +-
 apps/common/main/lib/component/ComboBox.js    |   2 +-
 .../main/lib/component/ComboBoxFonts.js       |   2 +-
 .../main/lib/component/ComboDataView.js       |   5 +-
 apps/common/main/lib/component/Menu.js        | 122 ++++++++++++------
 .../main/resources/less/dropdown-menu.less    |   9 +-
 .../main/resources/less/dropdown-submenu.less |   5 +
 .../main/app/controller/Toolbar.js            |   2 +
 .../main/app/view/DocumentHolder.js           |   4 +
 apps/documenteditor/main/app/view/Toolbar.js  |   5 +-
 .../main/resources/less/rightmenu.less        |   2 +-
 .../main/app/controller/Toolbar.js            |   1 +
 .../main/app/view/DocumentHolder.js           |   4 +
 .../main/app/view/ShapeSettings.js            |   2 +-
 .../main/app/view/TextArtSettings.js          |   2 +-
 .../main/app/view/Toolbar.js                  |   5 +-
 .../main/resources/less/rightmenu.less        |   2 +-
 .../main/app/controller/DocumentHolder.js     |   4 +
 .../main/app/controller/Toolbar.js            |   2 +
 .../main/app/view/ShapeSettings.js            |   2 +-
 .../main/app/view/Statusbar.js                |   3 +
 .../main/app/view/Toolbar.js                  |   5 +-
 .../main/resources/less/rightmenu.less        |   2 +-
 24 files changed, 133 insertions(+), 69 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index ceabbeea1..4e2620a0c 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -48,7 +48,7 @@ define([
 
         template: _.template([
             '<div class="btn-group" id="<%= id %>">',
-                '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
+                '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" data-display="static" style="<%= style %>">',
                     '<span>&nbsp;</span>',
                     '<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
                 '</button>',
diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index 0d286ddb4..42b35573a 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -79,7 +79,7 @@ define([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="padding-top:2px; <%= style %>"></div>',
                 '<div style="display: table-cell;"></div>',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem">',
@@ -175,10 +175,10 @@ define([
         template: _.template([
             '<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<input type="text" class="form-control text">',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-display="static"><span class="caret img-commonctrl"></span></button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
-                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
+                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem">',
                             '<span><%= item.displayValue %></span>',
                             '<% if (item.offsety!==undefined) { %>',
                              '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
@@ -226,7 +226,7 @@ define([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="<%= style %>"></div>',
                 '<div style="display: table-cell;"></div>',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">',
diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js
index d0dfea40c..b5a758d76 100644
--- a/apps/common/main/lib/component/ComboBox.js
+++ b/apps/common/main/lib/component/ComboBox.js
@@ -92,7 +92,7 @@ define([
             template: _.template([
                 '<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false">',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<% _.each(items, function(item) { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js
index 240238e0d..b23b68040 100644
--- a/apps/common/main/lib/component/ComboBoxFonts.js
+++ b/apps/common/main/lib/component/ComboBoxFonts.js
@@ -72,7 +72,7 @@ define([
                 '<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false"> ',
                     '<div style="display: table-cell;"></div>',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret img-commonctrl"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent" data-display="static"><span class="caret img-commonctrl"></span></button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<li class="dropdown-divider">',
                     '<% _.each(items, function(item) { %>',
diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index 2c788b858..b2c07c76d 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -61,7 +61,8 @@ define([
             beforeOpenHandler   : null,
             additionalMenuItems  : null,
             showLast: true,
-            minWidth: -1
+            minWidth: -1,
+            displayMenu: 'static'
         },
 
         template: _.template([
@@ -90,6 +91,7 @@ define([
             this.needFillComboView = false;
             this.minWidth = this.options.minWidth;
             this.menuCls = this.options.menuCls;
+            this.displayMenu = this.options.displayMenu;
 
             this.fieldPicker = new Common.UI.DataView({
                 cls: 'field-picker',
@@ -107,6 +109,7 @@ define([
             this.openButton = new Common.UI.Button({
                 cls: 'open-menu',
                 menu: new Common.UI.Menu({
+                    display: this.displayMenu,
                     cls: this.menuCls,
                     menuAlign: 'tl-tl',
                     offset: [0, 3],
diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index de8f5df24..16f0ed12f 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -148,9 +148,11 @@ define([
                 menuAlign   : 'tl-bl',
                 menuAlignEl : null,
                 offset      : [0, 0],
+                popperOffset: '',
                 cyclic      : true,
                 search      : false,
-                scrollAlwaysVisible: true
+                scrollAlwaysVisible: true,
+                display     : 'static' // 'dynamic' - position with popper.js
             },
 
             template: _.template([
@@ -167,12 +169,14 @@ define([
                 this.rendered       = false;
                 this.items          = [];
                 this.offset         = [0, 0];
-                this.popperOffset   = this.options.popperOffset || '';
+                this.popperOffset   = this.options.popperOffset;
                 this.menuAlign      = this.options.menuAlign;
                 this.menuAlignEl    = this.options.menuAlignEl;
                 this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
                 this.search = this.options.search;
 
+                this.display = this.options.display;
+
                 if (this.options.restoreHeight) {
                     this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
                     !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
@@ -269,6 +273,12 @@ define([
                         function(e) { me.isOver = true;},
                         function(e) { me.isOver = false; }
                     );
+
+                    this.parentEl.find('[data-toggle="dropdown"]').data('display', this.display);
+                    if (this.display === 'static') {
+                        menuRoot.css({'position': 'fixed'});
+                        menuRoot.addClass('static');
+                    }
                 }
 
                 this.rendered = true;
@@ -544,14 +554,6 @@ define([
                 var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
                 var top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
 
-                if (menuParent.is('li.dropdown-submenu')) {
-                    if (left + menuW > docW) {
-                        menuParent.addClass('dropleft');
-                    } else {
-                        menuParent.addClass('dropright');
-                    }
-                }
-
                 if (this.options.restoreHeight) {
                     if (typeof (this.options.restoreHeight) == "number") {
                         if (top + menuH > docH) {
@@ -563,42 +565,83 @@ define([
                                 alwaysVisibleY: this.scrollAlwaysVisible
                             }));
                             this.wheelSpeed = undefined;
-                        } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
+                        } else if (top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
                             menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px');
                             this.wheelSpeed = undefined;
                         }
                     }
-                } else {
-                    var cg = Common.Utils.croppedGeometry();
-                    docH = cg.height - 10;
-
-                    var newTop = top;
-
-                    if (top + menuH > docH + cg.top) {
-                        if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
-                            m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
-                            newTop  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
-                        } else
-                            newTop = docH - menuH;
-                    }
-
-
-                    if (newTop < cg.top)
-                        newTop = cg.top;
-
-                    var margin = newTop - top;
-                    if (Math.abs(margin) > 1) {
-                        menuRoot.css({'margin-top': margin});
-                    }
                 }
 
+                if (this.display === 'static') {
+                    if (left + menuW > docW)
+                        if (menuParent.is('li.dropdown-submenu')) {
+                            left = offset.left - menuW + 2;
+                        } else {
+                            left = docW - menuW;
+                        }
+                    if (left < 0)
+                        left = 0;
+
+                    if (!this.options.restoreHeight) {
+                        var cg = Common.Utils.croppedGeometry();
+                        docH = cg.height - 10;
+                        if (top + menuH > docH + cg.top) {
+                            if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
+                                m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
+                                top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
+                            } else
+                                top = docH - menuH;
+                        }
+                        if (top < cg.top)
+                            top = cg.top;
+                    }
+                    if (!this.options.additionalAlign) {
+                        var _css = {left: Math.ceil(left), top: Math.ceil(top)};
+                        if (!(menuH < docH)) _css['margin-top'] = 0;
+
+                        menuRoot.css(_css);
+                    }
+                } else {
+                    if (menuParent.is('li.dropdown-submenu')) {
+                        menuParent.removeClass('dropleft dropright');
+                        if (left + menuW > docW) {
+                            menuParent.addClass('dropleft');
+                        } else {
+                            menuParent.addClass('dropright');
+                        }
+                    }
+                    if (typeof (this.options.restoreHeight) !== "number") {
+                        var cg = Common.Utils.croppedGeometry();
+                        docH = cg.height - 10;
+                        var newTop = top;
+                        if (!this.options.restoreHeight) {
+                            if (top + menuH > docH + cg.top) {
+                                newTop = docH - menuH;
+                            }
+                            if (newTop < cg.top)
+                                newTop = cg.top;
+                            var margin = newTop - top;
+                            if (Math.abs(margin) > 1) {
+                                menuRoot.css({'margin-top': margin});
+                            }
+                        }
+                        if (newTop + menuH > docH) {
+                            menuRoot.css('max-height', (docH - newTop) + 'px');
+                            if (!this.options.restoreHeight) {
+                                (!this.scroller) && (this.scroller = new Common.UI.Scroller({
+                                    el: this.$el.find('.dropdown-menu'),
+                                    suppressScrollX: true,
+                                    alwaysVisibleY: true
+                                }));
+                                console.log(this.$el.find('.dropdown-menu'));
+                            }
+                        } else if (top + menuH - docH < 0.5 && menuRoot.height() < this.options.maxHeight) {
+                            menuRoot.css('max-height', (Math.min(docH - top, this.options.maxHeight)) + 'px');
+                        }
+                    }
+                }
                 if (this.options.additionalAlign) {
                     this.options.additionalAlign.call(this, menuRoot, left, top);
-                } else {
-                    /*var _css = {top: Math.ceil(newTop)};
-                    if (!(menuH < docH)) _css['margin-top'] = 0;
-
-                    menuRoot.css(_css);*/
                 }
             },
 
@@ -861,7 +904,7 @@ define([
         onBeforeShowMenu: function(e) {
             Common.NotificationCenter.trigger('menu:show');
             this.trigger('show:before', this, e);
-            //this.alignPosition();
+            this.alignPosition();
         },
 
         onAfterShowMenu: function(e) {
@@ -1012,6 +1055,7 @@ define([
             var top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
 
             if (menuParent.is('li.dropdown-submenu')) {
+                menuParent.removeClass('dropleft dropright');
                 if (left + menuW > docW) {
                     menuParent.addClass('dropleft');
                 } else {
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index c1360b40e..dedd81dae 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -4,6 +4,7 @@
 
 .dropdown-menu {
     padding: 5px 0;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
 
     &.scrollable-menu {
         height: auto;
@@ -127,12 +128,4 @@
         transform: none !important;
         top: 100% !important;
     }
-}
-
-.combo-styles {
-    .dropdown-menu {
-        &.position-top-right {
-            right: 30px !important;
-        }
-    }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/dropdown-submenu.less b/apps/common/main/resources/less/dropdown-submenu.less
index 7328f55d0..f4b5b6dd9 100644
--- a/apps/common/main/resources/less/dropdown-submenu.less
+++ b/apps/common/main/resources/less/dropdown-submenu.less
@@ -8,6 +8,11 @@
             right: 100%;
             left: auto;
         }
+
+        &.static {
+            margin-top: -6px;
+            margin-left: -1px;
+        }
     }
 
     & > a:after {
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 8bccdbc2f..d5c0bf57e 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -2578,6 +2578,7 @@ define([
                 var menuItem = new Common.UI.MenuItem({
                     caption: shapeGroup.get('groupName'),
                     menu: new Common.UI.Menu({
+                        display: 'dynamic',
                         menuAlign: 'tl-tr',
                         items: [
                             { template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
@@ -2634,6 +2635,7 @@ define([
                 var menuItem = new Common.UI.MenuItem({
                     caption: equationGroup.get('groupName'),
                     menu: new Common.UI.Menu({
+                        display: 'dynamic',
                         menuAlign: 'tl-tr',
                         items: [
                             {
diff --git a/apps/documenteditor/main/app/view/DocumentHolder.js b/apps/documenteditor/main/app/view/DocumentHolder.js
index c986e8257..25bc2c0b6 100644
--- a/apps/documenteditor/main/app/view/DocumentHolder.js
+++ b/apps/documenteditor/main/app/view/DocumentHolder.js
@@ -102,6 +102,10 @@ define([
 
                         menu.render(menuContainer);
                         menu.cmpEl.attr({tabindex: "-1"});
+
+                        //position without popper
+                        menu.cmpEl.data('display', 'static');
+                        menu.cmpEl.css({'position': 'fixed'});
                     }
 
                     menuContainer.css({
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 90ec206fb..e01a2f6ed 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -539,7 +539,7 @@ define([
                         iconCls: 'toolbar__icon btn-insertshape',
                         caption: me.capBtnInsShape,
                         enableToggle: true,
-                        menu: new Common.UI.Menu({cls: 'menu-shapes'})
+                        menu: new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
                     });
                     this.paragraphControls.push(this.btnInsertShape);
 
@@ -549,7 +549,7 @@ define([
                         iconCls: 'toolbar__icon btn-insertequation',
                         caption: me.capBtnInsEquation,
                         split: true,
-                        menu: new Common.UI.Menu({cls: 'menu-shapes'})
+                        menu: new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
                     });
                     this.paragraphControls.push(this.btnInsertEquation);
 
@@ -1167,7 +1167,6 @@ define([
 
                     this.listStyles = new Common.UI.ComboDataView({
                         cls: 'combo-styles',
-                        menuCls: 'position-top-right',
                         style: 'position: relative;',
                         itemWidth: 104,
                         itemHeight: 38,
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index a6e37ff3d..fcd4c6661 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -15,7 +15,7 @@
     display: none;
     padding: 0 10px 0 15px;
     position: relative;
-    //overflow: hidden;
+    overflow: hidden;
     border-left: 1px solid @gray-dark;
     line-height: 15px;
 }
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index 25b75df12..7c5ea6147 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -1843,6 +1843,7 @@ define([
                 var menuItem = new Common.UI.MenuItem({
                     caption: equationGroup.get('groupName'),
                     menu: new Common.UI.Menu({
+                        display: 'dynamic',
                         menuAlign: 'tl-tr',
                         items: [
                             { template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js
index 3e24b8da3..1ed542ac0 100644
--- a/apps/presentationeditor/main/app/view/DocumentHolder.js
+++ b/apps/presentationeditor/main/app/view/DocumentHolder.js
@@ -94,6 +94,10 @@ define([
 
                         menu.render(menuContainer);
                         menu.cmpEl.attr({tabindex: "-1"});
+
+                        //position without popper
+                        menu.cmpEl.data('display', 'static');
+                        menu.cmpEl.css({'position': 'fixed'});
                     }
 
                     menuContainer.css({
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 7ff51ea96..b612bad15 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1222,7 +1222,7 @@ define([
             this.cmbGradType = new Common.UI.ComboBox({
                 el: $('#shape-combo-grad-type'),
                 cls: 'input-group-nr',
-                menuStyle: 'min-width: 90px;',
+                menuStyle: 'min-width: 96px;',
                 editable: false,
                 data: this._arrGradType
             });
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 35d9c6385..2c0a748ee 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -1182,7 +1182,7 @@ define([
             this.cmbGradType = new Common.UI.ComboBox({
                 el: $('#textart-combo-grad-type'),
                 cls: 'input-group-nr',
-                menuStyle: 'min-width: 90px;',
+                menuStyle: 'min-width: 96px;',
                 editable: false,
                 data: this._arrGradType
             });
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index 545a890de..e875824e6 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -548,7 +548,7 @@ define([
                         caption: me.capInsertEquation,
                         lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
                         split: true,
-                        menu: new Common.UI.Menu({cls: 'menu-shapes'})
+                        menu: new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
                     });
                     me.slideOnlyControls.push(this.btnInsertEquation);
 
@@ -797,7 +797,6 @@ define([
 
                     me.listTheme = new Common.UI.ComboDataView({
                         cls: 'combo-styles',
-                        menuCls: 'position-top-right',
                         style: 'position: relative;',
                         itemWidth: 85,
                         enableKeyEvents: true,
@@ -1042,6 +1041,7 @@ define([
                     btn.updateHint(me.tipInsertShape);
                     btn.setMenu(
                         new Common.UI.Menu({
+                            display: 'dynamic',
                             cls: 'menu-shapes'
                         }).on('hide:after', function (e) {
                             me.fireEvent('insert:shape', ['menu:hide']);
@@ -1486,6 +1486,7 @@ define([
                     var menuitem = new Common.UI.MenuItem({
                         caption: group.get('groupName'),
                         menu: new Common.UI.Menu({
+                            display: 'dynamic',
                             menuAlign: 'tl-tr',
                             items: [
                                 {template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 40a813544..2f371c1d9 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -15,7 +15,7 @@
     display: none;
     padding: 0 10px 0 15px;
     position: relative;
-    //overflow: hidden;
+    overflow: hidden;
     border-left: 1px solid @gray-dark;
     line-height: 15px;
 }
diff --git a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
index a85e080f1..8c0b5887f 100644
--- a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
+++ b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
@@ -2054,6 +2054,10 @@ define([
 
                     menu.render(menuContainer);
                     menu.cmpEl.attr({tabindex: "-1"});
+
+                    //position without popper
+                    menu.cmpEl.data('display', 'static');
+                    menu.cmpEl.css({'position': 'fixed'});
                 }
 
                 if (/*!this.mouse.isRightButtonDown &&*/ event.button !== 2) {
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index f96aecf6a..0238b7f18 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -2766,6 +2766,7 @@ define([
                 var menuItem = new Common.UI.MenuItem({
                     caption: shapeGroup.get('groupName'),
                     menu: new Common.UI.Menu({
+                        display: 'dynamic',
                         menuAlign: 'tl-tr',
                         items: [
                             { template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
@@ -2823,6 +2824,7 @@ define([
                 var menuItem = new Common.UI.MenuItem({
                     caption: equationGroup.get('groupName'),
                     menu: new Common.UI.Menu({
+                        display: 'dynamic',
                         menuAlign: 'tl-tr',
                         items: [
                             { template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index db91bd9fd..ee9b62d3a 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1248,7 +1248,7 @@ define([
             this.cmbGradType = new Common.UI.ComboBox({
                 el: $('#shape-combo-grad-type'),
                 cls: 'input-group-nr',
-                menuStyle: 'min-width: 90px;',
+                menuStyle: 'min-width: 96px;',
                 editable: false,
                 data: this._arrGradType
             });
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index d19152259..a4d2cff3c 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -293,6 +293,7 @@ define([
                 });
 
                 var menuHiddenItems = new Common.UI.Menu({
+                    display: 'dynamic',
                     maxHeight: 260,
                     menuAlign: 'tl-tr'
                 }).on('show:after', function () {
@@ -303,6 +304,7 @@ define([
                 });
 
                 var menuColorItems = new Common.UI.Menu({
+                    display: 'dynamic',
                     menuAlign: 'tl-tr',
                     cls: 'color-tab',
                     items: [
@@ -320,6 +322,7 @@ define([
 
                 me.mnuTabColor = dummyCmp();
                 this.tabMenu = new Common.UI.Menu({
+                    display: 'dynamic',
                     menuAlign: 'bl-tl',
                     items: [
                         {caption: this.itemInsert,  value: 'ins'},
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 74d9c596f..7bb4ac1aa 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -704,7 +704,7 @@ define([
                     enableToggle: true,
                     caption     : me.capInsertShape,
                     lock        : [_set.editCell, _set.lostConnect, _set.coAuth],
-                    menu        : new Common.UI.Menu({cls: 'menu-shapes'})
+                    menu        : new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
                 });
 
                 me.btnInsertText = new Common.UI.Button({
@@ -737,7 +737,7 @@ define([
                     caption     : me.capInsertEquation,
                     split       : true,
                     lock        : [_set.editCell, _set.lostConnect, _set.coAuth],
-                    menu        : new Common.UI.Menu({cls: 'menu-shapes'})
+                    menu        : new Common.UI.Menu({cls: 'menu-shapes', display: 'dynamic'})
                 });
 
                 me.btnInsertSymbol = new Common.UI.Button({
@@ -779,7 +779,6 @@ define([
                 me.listStyles = new Common.UI.ComboDataView({
                     cls             : 'combo-styles',
                     style           : 'position: relative;',
-                    menuCls         : 'position-top-right',
                     enableKeyEvents : true,
                     itemWidth       : 112,
                     itemHeight      : 38,
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 1016de4c1..6dadc6928 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -15,7 +15,7 @@
     display: none;
     padding: 0 10px 0 15px;
     position: relative;
-    //overflow: hidden;
+    overflow: hidden;
     border-left: 1px solid @gray-dark;
     line-height: 15px;
 }