From 1ec07ddcd6edcf615373a224b1d99c63fed4a228 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 7 Oct 2020 18:06:42 +0300
Subject: [PATCH] Update bootstrap (fix ComboDataView position, fix class
 hidden)

---
 apps/common/main/lib/component/Button.js      |  8 ++---
 .../main/lib/component/ComboBorderSize.js     |  4 +--
 .../main/lib/component/ComboDataView.js       |  8 +++++
 .../common/main/lib/view/AutoCorrectDialog.js |  8 ++---
 apps/common/main/lib/view/LanguageDialog.js   |  5 +--
 .../main/lib/view/ListSettingsDialog.js       |  2 +-
 apps/common/main/lib/view/SignDialog.js       |  4 +--
 .../main/resources/less/dropdown-menu.less    | 20 ++++++++++++
 apps/common/main/resources/less/input.less    |  2 ++
 .../main/app/template/ChartSettings.template  |  4 +--
 .../main/app/template/ImageSettings.template  |  2 +-
 .../main/app/template/ShapeSettings.template  |  4 +--
 .../app/template/TextArtSettings.template     |  4 +--
 .../main/app/template/Toolbar.template        |  2 +-
 .../main/app/view/ChartSettings.js            |  6 ++--
 .../main/app/view/FileMenuPanels.js           |  4 +--
 .../main/app/view/ImageSettings.js            |  3 +-
 .../main/app/view/ShapeSettings.js            |  6 ++--
 .../main/app/view/TextArtSettings.js          |  7 +++--
 apps/documenteditor/main/app/view/Toolbar.js  |  2 ++
 .../main/app/template/ChartSettings.template  |  2 +-
 .../main/app/template/ShapeSettings.template  |  2 +-
 .../main/app/template/SlideSettings.template  |  2 +-
 .../app/template/TextArtSettings.template     |  6 ++--
 .../main/app/template/Toolbar.template        |  2 +-
 .../main/app/view/ChartSettings.js            |  3 +-
 .../main/app/view/ShapeSettings.js            |  3 +-
 .../main/app/view/SlideSettings.js            |  3 +-
 .../main/app/view/Statusbar.js                |  2 +-
 .../main/app/view/TextArtSettings.js          |  9 ++++--
 .../main/app/view/Toolbar.js                  |  2 ++
 apps/presentationeditor/main/app_dev.js       |  7 +++--
 .../main/resources/less/app.less              | 29 +++++++++--------
 .../main/resources/less/leftmenu.less         |  2 +-
 .../main/resources/less/rightmenu.less        |  2 +-
 .../main/resources/less/statusbar.less        |  6 ++++
 .../main/app/template/CellSettings.template   |  2 +-
 .../main/app/template/ChartSettings.template  |  4 +--
 .../app/template/ChartSettingsDlg.template    |  2 +-
 .../main/app/template/ImageSettings.template  |  2 +-
 .../main/app/template/ShapeSettings.template  |  2 +-
 .../main/app/template/SlicerSettings.template |  2 +-
 .../main/app/template/TableSettings.template  |  4 +--
 .../app/template/TextArtSettings.template     |  6 ++--
 .../main/app/template/Toolbar.template        |  2 +-
 .../main/app/view/AutoFilterDialog.js         |  6 ++--
 .../main/app/view/CellSettings.js             |  3 +-
 .../main/app/view/ChartSettings.js            |  6 ++--
 .../main/app/view/ChartSettingsDlg.js         |  1 +
 .../main/app/view/PivotTable.js               |  1 +
 .../main/app/view/ShapeSettings.js            |  3 +-
 .../main/app/view/SlicerSettings.js           |  3 +-
 .../main/app/view/TableOptionsDialog.js       |  6 ++--
 .../main/app/view/TableSettings.js            |  2 +-
 .../main/app/view/TextArtSettings.js          |  9 ++++--
 .../main/app/view/Toolbar.js                  |  8 +++--
 apps/spreadsheeteditor/main/app_dev.js        |  7 +++--
 .../main/resources/less/app.less              | 31 ++++++++++---------
 .../main/resources/less/leftmenu.less         |  2 +-
 .../main/resources/less/rightmenu.less        |  2 +-
 60 files changed, 190 insertions(+), 113 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 466baed30..bfca59fcd 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -613,13 +613,13 @@ define([
                     var tip = this.btnEl.data('bs.tooltip');
                     if (tip) {
                         disabled && tip.hide();
-                        !Common.Utils.isGecko && (tip.enabled = !disabled);
+                        !Common.Utils.isGecko && (!disabled ? tip.enable() : tip.disable());
                     }
                     if (this.btnMenuEl) {
                         tip = this.btnMenuEl.data('bs.tooltip');
                         if (tip) {
                             disabled && tip.hide();
-                            !Common.Utils.isGecko && (tip.enabled = !disabled);
+                            !Common.Utils.isGecko && (!disabled ? tip.enable() : tip.disable());
                         }
                     }
                 }
@@ -727,13 +727,13 @@ define([
                 var tip = this.btnEl.data('bs.tooltip');
                 if (tip) {
                     this.disabled && tip.hide();
-                    !Common.Utils.isGecko && (tip.enabled = !this.disabled);
+                    !Common.Utils.isGecko && (!this.disabled ? tip.enable() : tip.disable());
                 }
                 if (this.btnMenuEl) {
                     tip = this.btnMenuEl.data('bs.tooltip');
                     if (tip) {
                         this.disabled && tip.hide();
-                        !Common.Utils.isGecko && (tip.enabled = !this.disabled);
+                        !Common.Utils.isGecko && (!this.disabled ? tip.enable() : tip.disable());
                     }
                 }
             }
diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index 5ce6c83e8..0d286ddb4 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -226,10 +226,10 @@ 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"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><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" style="padding: 2px 0 2px 10px;">',
+                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">',
                             '<span style="margin-top: 0;"></span>',
                             '<% if (item.offsety!==undefined) { %>',
                                 '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index 3580ac124..2c788b858 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -51,6 +51,7 @@ define([
         options : {
             id                  : null,
             cls                 : '',
+            menuCls             : '',
             style               : '',
             hint                : false,
             itemWidth           : 80,
@@ -88,6 +89,7 @@ define([
             this.rendered    = false;
             this.needFillComboView = false;
             this.minWidth = this.options.minWidth;
+            this.menuCls = this.options.menuCls;
 
             this.fieldPicker = new Common.UI.DataView({
                 cls: 'field-picker',
@@ -105,6 +107,7 @@ define([
             this.openButton = new Common.UI.Button({
                 cls: 'open-menu',
                 menu: new Common.UI.Menu({
+                    cls: this.menuCls,
                     menuAlign: 'tl-tl',
                     offset: [0, 3],
                     items: [
@@ -204,6 +207,11 @@ define([
 
                 me.onResize();
 
+                // set align element for dropdown
+                me.openButton.cmpEl.find('button[data-toggle="dropdown"]').data('reference', me.cmpEl.find('.view > .dataview'));
+                me.openButton.cmpEl.find('button[data-toggle="dropdown"]').data('boundary', $('#viewport')[0]);
+                me.openButton.cmpEl.find('button[data-toggle="dropdown"]').data('flip', false);
+
                 me.rendered = true;
 
                 me.trigger('render:after', me);
diff --git a/apps/common/main/lib/view/AutoCorrectDialog.js b/apps/common/main/lib/view/AutoCorrectDialog.js
index 9651fa4fa..da85fdbf7 100644
--- a/apps/common/main/lib/view/AutoCorrectDialog.js
+++ b/apps/common/main/lib/view/AutoCorrectDialog.js
@@ -84,8 +84,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
                     '<div class="separator horizontal"></div>',
                     '<div class="footer center">',
                         '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
-                        '<button class="btn normal dlg-btn primary can-apply hidden" result="ok" style="width: 86px;">' + this.okButtonText + '</button>',
-                        '<button class="btn normal dlg-btn can-apply hidden" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
+                        '<button class="btn normal dlg-btn primary can-apply d-none" result="ok" style="width: 86px;">' + this.okButtonText + '</button>',
+                        '<button class="btn normal dlg-btn can-apply d-none" result="cancel" style="width: 86px;">' + this.cancelButtonText + '</button>',
                     '</div>'
                 ].join('')
             }, options || {});
@@ -767,8 +767,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
         },
 
         updateFooterButtons: function(apply) {
-            this.applyButtons.toggleClass('hidden', !apply);
-            this.closeButtons.toggleClass('hidden', apply);
+            this.applyButtons.toggleClass('d-none', !apply);
+            this.closeButtons.toggleClass('d-none', apply);
         },
 
 
diff --git a/apps/common/main/lib/view/LanguageDialog.js b/apps/common/main/lib/view/LanguageDialog.js
index 87ef8ad04..df31e4121 100644
--- a/apps/common/main/lib/view/LanguageDialog.js
+++ b/apps/common/main/lib/view/LanguageDialog.js
@@ -82,16 +82,17 @@ define([
             el: $window.find('#id-document-language'),
             cls: 'input-group-nr',
             menuStyle: 'min-width: 318px; max-height: 285px;',
+            menuCls: 'position-bottom',
             editable: false,
             template: _.template([
                 '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control">',
                     '<span class="icon input-icon spellcheck-lang toolbar__icon btn-ic-docspell"></span>',
-                    '<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-reference="parent"><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" style="padding-left: 28px !important;" langval="<%= item.value %>">',
+                            '<a class="dropdown-item" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= item.value %>">',
                                 '<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                                 '<%= scope.getDisplayValue(item) %>',
                             '</a>',
diff --git a/apps/common/main/lib/view/ListSettingsDialog.js b/apps/common/main/lib/view/ListSettingsDialog.js
index 3bee84954..703b17350 100644
--- a/apps/common/main/lib/view/ListSettingsDialog.js
+++ b/apps/common/main/lib/view/ListSettingsDialog.js
@@ -339,7 +339,7 @@ define([
         },
 
         ShowHideElem: function(value) {
-            this.numberingControls.toggleClass('hidden', value==0);
+            this.numberingControls.toggleClass('d-none', value==0);
             this.cmbNumFormat.setVisible(value==1);
             this.cmbBulletFormat.setVisible(value==0);
         },
diff --git a/apps/common/main/lib/view/SignDialog.js b/apps/common/main/lib/view/SignDialog.js
index d8a16d32a..f19b273c8 100644
--- a/apps/common/main/lib/view/SignDialog.js
+++ b/apps/common/main/lib/view/SignDialog.js
@@ -105,7 +105,7 @@ define([
                             '<td><label style="font-weight: bold;margin-bottom: 3px;">' + this.textCertificate + '</label></td>' +
                             '<td rowspan="2" style="vertical-align: top; padding-left: 30px;"><button id="id-dlg-sign-change" class="btn btn-text-default" style="">' + this.textSelect + '</button></td>',
                         '</tr>',
-                        '<tr><td><div id="id-dlg-sign-certificate" class="hidden" style="max-width: 212px;overflow: hidden;"></td></tr>',
+                        '<tr><td><div id="id-dlg-sign-certificate" class="d-none" style="max-width: 212px;overflow: hidden;"></td></tr>',
                     '</table>',
                 '</div>'
             ].join('');
@@ -318,7 +318,7 @@ define([
             var date = certificate.date,
                 arr_date = (typeof date == 'string') ? date.split(' - ') : ['', ''];
             this.cntCertificate.html(this.templateCertificate({name: certificate.name, valid: this.textValid.replace('%1', arr_date[0]).replace('%2', arr_date[1])}));
-            this.cntCertificate.toggleClass('hidden', _.isEmpty(this.certificateId) || this.certificateId<0);
+            this.cntCertificate.toggleClass('d-none', _.isEmpty(this.certificateId) || this.certificateId<0);
             this.btnChangeCertificate.setCaption((_.isEmpty(this.certificateId) || this.certificateId<0) ? this.textSelect : this.textChange);
             this.btnOk.setDisabled(_.isEmpty(this.certificateId) || this.certificateId<0);
         },
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 92f102047..c1360b40e 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -115,4 +115,24 @@
             }
         }
     }
+    &.position-top-left {
+        transform: none !important;
+    }
+    &.position-top-right {
+        transform: none !important;
+        right: 0 !important;
+        left: auto !important;
+    }
+    &.position-bottom {
+        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/input.less b/apps/common/main/resources/less/input.less
index ae0c3328a..70d58f913 100644
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@@ -3,6 +3,8 @@
     .box-shadow(none);
     color: @gray-deep;
     .user-select(text);
+    height: 22px;
+    padding: 1px 3px;
 
     &:focus {
         border-color: @input-border;
diff --git a/apps/documenteditor/main/app/template/ChartSettings.template b/apps/documenteditor/main/app/template/ChartSettings.template
index b4d293b9a..91b5fd7a7 100644
--- a/apps/documenteditor/main/app/template/ChartSettings.template
+++ b/apps/documenteditor/main/app/template/ChartSettings.template
@@ -24,7 +24,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="chart-combo-wrap" style="width: 100%;"></div>
+            <div id="chart-combo-wrap" style="width: 100%; position: relative;"></div>
         </td>
     </tr>
     <tr>
@@ -44,7 +44,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div class="" id="chart-combo-style" style="width: 100%;"></div>
+            <div class="" id="chart-combo-style" style="width: 100%; position: relative;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
index 2b7db5d82..c48fd279c 100644
--- a/apps/documenteditor/main/app/template/ImageSettings.template
+++ b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -65,7 +65,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="image-combo-wrap" style="width: 100%;"></div>
+            <div id="image-combo-wrap" style="width: 100%; position: relative;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template
index 1c2ba2c8e..78b1c9728 100644
--- a/apps/documenteditor/main/app/template/ShapeSettings.template
+++ b/apps/documenteditor/main/app/template/ShapeSettings.template
@@ -41,7 +41,7 @@
             </div>
             <div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
-                <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
+                <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
                     <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
@@ -186,7 +186,7 @@
     </tr>
     <tr class="shape-only">
         <td>
-            <div id="shape-combo-wrap" style="width: 100%;"></div>
+            <div id="shape-combo-wrap" style="width: 100%; position: relative;"></div>
         </td>
     </tr>
     <tr class="shape-only">
diff --git a/apps/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template
index 711f3e443..6dc7923dd 100644
--- a/apps/documenteditor/main/app/template/TextArtSettings.template
+++ b/apps/documenteditor/main/app/template/TextArtSettings.template
@@ -6,7 +6,7 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div class="" id="textart-combo-template" style="width: 100%; height: 64px;"></div>
+            <div class="" id="textart-combo-template" style="width: 100%; height: 64px; position: relative;"></div>
         </td>
     </tr>
     <tr>
@@ -132,7 +132,7 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div class="" id="textart-combo-transform" style="width: 100%; height: 42px;"></div>
+            <div class="" id="textart-combo-transform" style="width: 100%; height: 42px; position: relative;"></div>
         </td>
     </tr>
     <tr class="finish-cell"></tr>
diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template
index 37f13e618..e154cb48b 100644
--- a/apps/documenteditor/main/app/template/Toolbar.template
+++ b/apps/documenteditor/main/app/template/Toolbar.template
@@ -77,7 +77,7 @@
                         <span class="btn-slot" id="slot-btn-mailrecepients"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles"></div>
+                <div class="group" id="slot-field-styles" style="position: relative;"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js
index 3fa55df2e..6e691a63d 100644
--- a/apps/documenteditor/main/app/view/ChartSettings.js
+++ b/apps/documenteditor/main/app/view/ChartSettings.js
@@ -226,7 +226,8 @@ define([
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
                 store: new Common.UI.DataViewStore(viewData),
-                cls: 'combo-chart-style'
+                cls: 'combo-chart-style',
+                menuCls: 'position-top-left'
             });
             this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
                 '<div class="style" id="<%= id %>">',
@@ -425,7 +426,8 @@ define([
                     itemHeight: 50,
                     menuMaxHeight: 270,
                     enableKeyEvents: true,
-                    cls: 'combo-chart-style'
+                    cls: 'combo-chart-style',
+                    menuCls: 'position-top-left'
                 });
                 this.cmbChartStyle.render($('#chart-combo-style'));
                 this.cmbChartStyle.openButton.menu.cmpEl.css({
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index aa9162556..007346e69 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -1236,8 +1236,8 @@ define([
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.pnlApply.toggleClass('hidden', !mode.isEdit);
-            this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
+            this.pnlApply.toggleClass('d-none', !mode.isEdit);
+            this.tblAuthor.find('.close').toggleClass('d-none', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
                 this.inputSubject._input.attr('placeholder', '');
diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js
index 14a7f1ac8..b6846661b 100644
--- a/apps/documenteditor/main/app/view/ImageSettings.js
+++ b/apps/documenteditor/main/app/view/ImageSettings.js
@@ -136,7 +136,8 @@ define([
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
                 store: new Common.UI.DataViewStore(viewData),
-                cls: 'combo-chart-style'
+                cls: 'combo-chart-style',
+                menuCls: 'position-top-left'
             });
             this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
                 '<div class="style" id="<%= id %>">',
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index a63b31124..797e09639 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1217,7 +1217,8 @@ define([
                 itemHeight: 28,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-pattern'
+                cls: 'combo-pattern',
+                menuCls: 'position-top-left'
             });
             this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
                     '<div class="style" id="<%= id %>">',
@@ -1536,7 +1537,8 @@ define([
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
                 store: new Common.UI.DataViewStore(viewData),
-                cls: 'combo-chart-style'
+                cls: 'combo-chart-style',
+                menuCls: 'position-top-left'
             });
             this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
                 '<div class="style" id="<%= id %>">',
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index 6101caa8f..b9fab8bdf 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -1050,7 +1050,8 @@ define([
                 itemHeight: 50,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-textart'
+                cls: 'combo-textart',
+                menuCls: 'position-top-left'
             });
             this.cmbTransform.render($('#textart-combo-transform'));
             this.cmbTransform.openButton.menu.cmpEl.css({
@@ -1083,14 +1084,14 @@ define([
                     menuMaxHeight: 300,
                     enableKeyEvents: true,
                     showLast: false,
-                    cls: 'combo-textart'
+                    cls: 'combo-textart',
+                    menuCls: 'position-top-left'
                 });
                 this.cmbTextArt.render($('#textart-combo-template'));
                 this.cmbTextArt.openButton.menu.cmpEl.css({
                     'min-width': 178,
                     'max-width': 178
                 });
-                this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this));
                 this.cmbTextArt.openButton.menu.on('show:after', function () {
                     me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true});
                 });
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 1e9d8af16..6819aa561 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1119,6 +1119,8 @@ define([
 
                     this.listStyles = new Common.UI.ComboDataView({
                         cls: 'combo-styles',
+                        menuCls: 'position-top-right',
+                        style: 'position: relative;',
                         itemWidth: 104,
                         itemHeight: 38,
 //                hint        : this.tipParagraphStyle,
diff --git a/apps/presentationeditor/main/app/template/ChartSettings.template b/apps/presentationeditor/main/app/template/ChartSettings.template
index 7ca88a41a..91aca6c0a 100644
--- a/apps/presentationeditor/main/app/template/ChartSettings.template
+++ b/apps/presentationeditor/main/app/template/ChartSettings.template
@@ -36,7 +36,7 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="chart-combo-style" style=""></div>
+            <div id="chart-combo-style" style="position: relative;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/presentationeditor/main/app/template/ShapeSettings.template b/apps/presentationeditor/main/app/template/ShapeSettings.template
index 30cbd4f8b..674048c87 100644
--- a/apps/presentationeditor/main/app/template/ShapeSettings.template
+++ b/apps/presentationeditor/main/app/template/ShapeSettings.template
@@ -41,7 +41,7 @@
             </div>
             <div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
-                <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
+                <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
                     <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
diff --git a/apps/presentationeditor/main/app/template/SlideSettings.template b/apps/presentationeditor/main/app/template/SlideSettings.template
index 267fe7abf..bb329e507 100644
--- a/apps/presentationeditor/main/app/template/SlideSettings.template
+++ b/apps/presentationeditor/main/app/template/SlideSettings.template
@@ -41,7 +41,7 @@
             </div>
             <div id="slide-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
-                <div id="slide-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
+                <div id="slide-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
                     <div id="slide-foreground-color-btn" style="display: inline-block; float:right;"></div>
diff --git a/apps/presentationeditor/main/app/template/TextArtSettings.template b/apps/presentationeditor/main/app/template/TextArtSettings.template
index d480b1716..1cbe2ebd6 100644
--- a/apps/presentationeditor/main/app/template/TextArtSettings.template
+++ b/apps/presentationeditor/main/app/template/TextArtSettings.template
@@ -6,7 +6,7 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div class="" id="textart-combo-template" style="width: 100%; height: 64px;"></div>
+            <div class="" id="textart-combo-template" style="width: 100%; height: 64px; position: relative;"></div>
         </td>
     </tr>
     <tr>
@@ -59,7 +59,7 @@
             </div>
             <div id="textart-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
-                <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
+                <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
                     <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
@@ -172,7 +172,7 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div class="" id="textart-combo-transform" style="width: 100%; height: 42px;"></div>
+            <div class="" id="textart-combo-transform" style="width: 100%; height: 42px; position: relative;"></div>
         </td>
     </tr>
     <tr class="finish-cell"></tr>
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index d04201732..f23af1017 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -96,7 +96,7 @@
                         <span class="btn-slot split" id="slot-btn-slidesize"></span>
                     </div>
                 </div>
-                <div class="group flex" id="slot-field-styles" style="width: 100%; min-width: 148px;" data-group-width="100%"></div>
+                <div class="group flex" id="slot-field-styles" style="width: 100%; min-width: 148px; position: relative;" data-group-width="100%"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
diff --git a/apps/presentationeditor/main/app/view/ChartSettings.js b/apps/presentationeditor/main/app/view/ChartSettings.js
index 7fceffff2..fca232b80 100644
--- a/apps/presentationeditor/main/app/view/ChartSettings.js
+++ b/apps/presentationeditor/main/app/view/ChartSettings.js
@@ -357,7 +357,8 @@ define([
                     itemHeight: 50,
                     menuMaxHeight: 270,
                     enableKeyEvents: true,
-                    cls: 'combo-chart-style'
+                    cls: 'combo-chart-style',
+                    menuCls: 'position-top-left'
                 });
                 this.cmbChartStyle.render($('#chart-combo-style'));
                 this.cmbChartStyle.openButton.menu.cmpEl.css({
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 2c56f6b06..7ff51ea96 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1131,7 +1131,8 @@ define([
                 itemHeight: 28,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-pattern'
+                cls: 'combo-pattern',
+                menuCls: 'position-top-left'
             });
             this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
                     '<div class="style" id="<%= id %>">',
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index a54f9956e..9ca6c6fa4 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -705,7 +705,8 @@ define([
                 itemHeight: 28,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-pattern'
+                cls: 'combo-pattern',
+                menuCls: 'position-top-left'
             });
             this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
                 '<div class="style" id="<%= id %>">',
diff --git a/apps/presentationeditor/main/app/view/Statusbar.js b/apps/presentationeditor/main/app/view/Statusbar.js
index e6b427b7f..f4e16c6f7 100644
--- a/apps/presentationeditor/main/app/view/Statusbar.js
+++ b/apps/presentationeditor/main/app/view/Statusbar.js
@@ -124,7 +124,7 @@ define([
                 this.btnZoomUp = new Common.UI.Button({
                     el: $('#btn-zoom-up',this.el),
                     hint: this.tipZoomIn+Common.Utils.String.platformKey('Ctrl++'),
-                    hintAnchor: 'top-right'
+                    hintAnchor: 'top'
                 });
 
                 this.cntZoom = new Common.UI.Button({
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 30dc06a29..35d9c6385 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -1093,7 +1093,8 @@ define([
                 itemHeight: 28,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-pattern'
+                cls: 'combo-pattern',
+                menuCls: 'position-top-left'
             });
             this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
                     '<div class="style" id="<%= id %>">',
@@ -1357,7 +1358,8 @@ define([
                 itemHeight: 50,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-textart'
+                cls: 'combo-textart',
+                menuCls: 'position-top-left'
             });
             this.cmbTransform.render($('#textart-combo-transform'));
             this.cmbTransform.openButton.menu.cmpEl.css({
@@ -1493,7 +1495,8 @@ define([
                     menuMaxHeight: 300,
                     enableKeyEvents: true,
                     showLast: false,
-                    cls: 'combo-textart'
+                    cls: 'combo-textart',
+                    menuCls: 'position-top-left'
                 });
                 this.cmbTextArt.render($('#textart-combo-template'));
                 this.cmbTextArt.openButton.menu.cmpEl.css({
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index 16dbb2791..545a890de 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -797,6 +797,8 @@ define([
 
                     me.listTheme = new Common.UI.ComboDataView({
                         cls: 'combo-styles',
+                        menuCls: 'position-top-right',
+                        style: 'position: relative;',
                         itemWidth: 85,
                         enableKeyEvents: true,
                         itemHeight: 38,
diff --git a/apps/presentationeditor/main/app_dev.js b/apps/presentationeditor/main/app_dev.js
index 278c6bcf0..a7dc35f2e 100644
--- a/apps/presentationeditor/main/app_dev.js
+++ b/apps/presentationeditor/main/app_dev.js
@@ -48,6 +48,7 @@ require.config({
         jquery          : '../vendor/jquery/jquery',
         underscore      : '../vendor/underscore/underscore',
         backbone        : '../vendor/backbone/backbone',
+        popper          : '../vendor/popper/popper',
         bootstrap       : '../vendor/bootstrap/dist/js/bootstrap',
         text            : '../vendor/requirejs-text/text',
         perfectscrollbar: 'common/main/lib/mods/perfect-scrollbar',
@@ -78,7 +79,8 @@ require.config({
         },
         bootstrap: {
             deps: [
-                'jquery'
+                'jquery',
+                'popper'
             ]
         },
         perfectscrollbar: {
@@ -121,7 +123,8 @@ require([
     'locale',
     'sockjs',
     'xregexp',
-    'underscore'
+    'underscore',
+    'popper'
 ], function (Backbone, Bootstrap, Core) {
     Backbone.history.start();
 
diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less
index 7d38ffd86..ba167523a 100644
--- a/apps/presentationeditor/main/resources/less/app.less
+++ b/apps/presentationeditor/main/resources/less/app.less
@@ -8,6 +8,8 @@
 @import "../../../../common/main/resources/less/asc-mixins.less";
 
 // Bootstrap overwrite
+@import "../../../../../vendor/bootstrap/less/_functions.less";
+@import "../../../../../vendor/bootstrap/less/_variables.less";
 @import "../../../../common/main/resources/less/variables.less";
 
 //
@@ -16,27 +18,28 @@
 
 // Core variables and mixins
 //@import "../../../../vendor/bootstrap/less/variables.less";
-@import "../../../../../vendor/bootstrap/less/mixins.less";
+@import "../../../../../vendor/bootstrap/less/_mixins.less";
+@import "../../../../../vendor/bootstrap/less/_root";
 
 // Reset
-@import "../../../../../vendor/bootstrap/less/normalize.less";
+@import "../../../../../vendor/bootstrap/less/_reboot.less";
 //@import "print.less";
 
 // Core CSS
-@import "../../../../../vendor/bootstrap/less/scaffolding.less";
-@import "../../../../../vendor/bootstrap/less/type.less";
+//@import "../../../../../vendor/bootstrap/less/scaffolding.less";
+@import "../../../../../vendor/bootstrap/less/_type.less";
 //@import "code.less";
 //@import "grid.less";
 //@import "tables.less";
-@import "../../../../../vendor/bootstrap/less/forms.less";
-@import "../../../../../vendor/bootstrap/less/buttons.less";
+@import "../../../../../vendor/bootstrap/less/_forms.less";
+@import "../../../../../vendor/bootstrap/less/_buttons.less";
 
 // Components
-@import "../../../../../vendor/bootstrap/less/component-animations.less";
+@import "../../../../../vendor/bootstrap/less/_transitions.less";
 //@import "glyphicons.less";
-@import "../../../../../vendor/bootstrap/less/dropdowns.less";
-@import "../../../../../vendor/bootstrap/less/button-groups.less";
-@import "../../../../../vendor/bootstrap/less/input-groups.less";
+@import "../../../../../vendor/bootstrap/less/_dropdown.less";
+@import "../../../../../vendor/bootstrap/less/_button-group.less";
+@import "../../../../../vendor/bootstrap/less/_input-group.less";
 //@import "navs.less";
 //@import "navbar.less";
 //@import "breadcrumbs.less";
@@ -56,13 +59,13 @@
 
 // Components w/ JavaScript
 //@import "modals.less";
-@import "../../../../../vendor/bootstrap/less/tooltip.less";
+@import "../../../../../vendor/bootstrap/less/_tooltip.less";
 //@import "popovers.less";
 //@import "carousel.less";
 
 // Utility classes
-@import "../../../../../vendor/bootstrap/less/utilities.less";
-@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
+@import "../../../../../vendor/bootstrap/less/_utilities.less";
+//@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
 
 //
 // Perfect scrollbar
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 3418fccfb..2185ab1ef 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -132,7 +132,7 @@
             }
 
             &.devider {
-                .dropdown-menu .dropdown-divider;
+                //.dropdown-menu .dropdown-divider;
                 margin-top: 10px;
                 margin-bottom: 10px;
             }
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 2f371c1d9..40a813544 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/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index 595a0bdea..77f462b15 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -79,6 +79,12 @@
         color: #000;
         margin-left: 6px;
 
+        .caret {
+            display: inline-block;
+            margin-left: 2px;
+            vertical-align: middle;
+        }
+
         .caret.up {
             background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
 
diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template
index 78fb733e6..26fb7f431 100644
--- a/apps/spreadsheeteditor/main/app/template/CellSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template
@@ -16,7 +16,7 @@
             </div>
             <div id="cell-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <label class="input-label" style="margin-top: 3px;"><%= scope.textPattern %></label>
-                <div id="cell-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
+                <div id="cell-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.textForeground %></label>
                     <div id="cell-foreground-color-btn" style="display: inline-block; float:right;"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettings.template b/apps/spreadsheeteditor/main/app/template/ChartSettings.template
index 0a8151692..fd85ad205 100644
--- a/apps/spreadsheeteditor/main/app/template/ChartSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ChartSettings.template
@@ -33,7 +33,7 @@
     <tr>
         <td class="padding-small">
             <label class="header" style=""><%= scope.textStyle %></label>
-            <div class="" id="chart-combo-style" style="width: 100%;"></div>
+            <div class="" id="chart-combo-style" style="width: 100%; position: relative;"></div>
         </td>
     </tr>
     <tr>
@@ -72,7 +72,7 @@
     <tr>
         <td class="padding-small">
             <label class="input-label" style=""><%= scope.strTemplate %></label>
-            <div class="" id="spark-combo-style" style="width: 100%;"></div>
+            <div class="" id="spark-combo-style" style="width: 100%; position: relative;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
index f73333cf4..a0f8355df 100644
--- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
@@ -320,7 +320,7 @@
                 </td>
                 <td class="padding-large">
                     <label class="header"><%= scope.textStyle %></label>
-                    <div id="spark-dlg-combo-style" style="width: 190px;"></div>
+                    <div id="spark-dlg-combo-style" style="width: 190px; position: relative;"></div>
                 </td>
             </tr>
         </table>
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettings.template b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
index da2f10b99..5b1a03cae 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
@@ -67,7 +67,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
+            <button type="button" class="btn btn-text-default d-none" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
index 30cbd4f8b..674048c87 100644
--- a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
@@ -41,7 +41,7 @@
             </div>
             <div id="shape-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
-                <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
+                <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
                     <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
index b3f78bdc8..1e2ca816e 100644
--- a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
@@ -72,7 +72,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="slicer-btn-style" style="width: 100%;"></div>
+            <div id="slicer-btn-style" style="width: 100%; position: relative;"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/TableSettings.template b/apps/spreadsheeteditor/main/app/template/TableSettings.template
index 47f03cc6d..3afb46af8 100644
--- a/apps/spreadsheeteditor/main/app/template/TableSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/TableSettings.template
@@ -51,12 +51,12 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
-    <tr class="hidden">
+    <tr class="d-none">
         <td colspan=2>
             <label class="header"><%= scope.textTableName %></label>
         </td>
     </tr>
-    <tr class="hidden">
+    <tr class="d-none">
         <td colspan=2 class="padding-small">
             <div id="table-txt-name" class="input-row"  style="width: 100%;"></div>
         </td>
diff --git a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
index d480b1716..1cbe2ebd6 100644
--- a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
@@ -6,7 +6,7 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div class="" id="textart-combo-template" style="width: 100%; height: 64px;"></div>
+            <div class="" id="textart-combo-template" style="width: 100%; height: 64px; position: relative;"></div>
         </td>
     </tr>
     <tr>
@@ -59,7 +59,7 @@
             </div>
             <div id="textart-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <label class="input-label" style="margin-top: 3px;"><%= scope.strPattern %></label>
-                <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
+                <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px; position: relative;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
                     <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
@@ -172,7 +172,7 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div class="" id="textart-combo-transform" style="width: 100%; height: 42px;"></div>
+            <div class="" id="textart-combo-transform" style="width: 100%; height: 42px; position: relative;"></div>
         </td>
     </tr>
     <tr class="finish-cell"></tr>
diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template
index cb7050e5f..daef46a62 100644
--- a/apps/spreadsheeteditor/main/app/template/Toolbar.template
+++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template
@@ -116,7 +116,7 @@
                         <span class="btn-slot split" id="slot-btn-table-tpl"></span>
                     </div>
                 </div>
-                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 160px;"></div>
+                <div class="group" id="slot-field-styles" style="width: 100%; min-width: 160px; position: relative;"></div>
             </section>
             <section class="panel" data-tab="ins">
                 <div class="group">
diff --git a/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js b/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js
index 1d34eed6e..486c8b361 100644
--- a/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js
@@ -588,7 +588,7 @@ define([
             this.cmbCondition1.on('selected', _.bind(function(combo, record) {
                 var isBetween = record.value == -2 || record.value == -3;
                 this.inputValue2.setVisible(isBetween);
-                this.lblAnd.toggleClass('hidden', !isBetween);
+                this.lblAnd.toggleClass('d-none', !isBetween);
                 this.inputValue.$el.width(isBetween ? 100 : 225);
                 var me = this;
                 _.defer(function () {
@@ -707,7 +707,7 @@ define([
                     this.inputValue.setValue(null === customFilters[0].asc_getVal() ? '' : customFilters[0].asc_getVal());
                     this.inputValue.$el.width((value==-2 || value==-3) ? 100 : 225);
 
-                    this.lblAnd.toggleClass('hidden', !(value==-2 || value==-3));
+                    this.lblAnd.toggleClass('d-none', !(value==-2 || value==-3));
                     this.inputValue2.setVisible(value==-2 || value==-3);
                     this.inputValue2.setValue((customFilters.length>1) ? (null === customFilters[1].asc_getVal() ? '' : customFilters[1].asc_getVal()) : '');
                 }
@@ -1832,7 +1832,7 @@ define([
             }
             if (isPivot && pivotObj.asc_getIsPageFilter()) {
                 this.setResizable(true, [this.initConfig.minwidth - this.menuPanelWidth, this.initConfig.minheight]);
-                menuPanel.addClass('hidden');
+                menuPanel.addClass('d-none');
                 width -= this.menuPanelWidth;
                 this.menuPanelWidth = 0;
             }
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index a260cbb7f..9d9ea9e99 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -302,7 +302,8 @@ define([
                 itemHeight: 28,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-pattern'
+                cls: 'combo-pattern',
+                menuCls: 'position-top-left'
             });
             this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
                 '<div class="style" id="<%= id %>">',
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
index e205fb0de..307957025 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
@@ -980,7 +980,8 @@ define([
                     itemHeight: 50,
                     menuMaxHeight: 270,
                     enableKeyEvents: true,
-                    cls: 'combo-chart-style'
+                    cls: 'combo-chart-style',
+                    menuCls: 'position-top-left'
                 });
                 this.cmbChartStyle.render($('#chart-combo-style'));
                 this.cmbChartStyle.openButton.menu.cmpEl.css({
@@ -1032,7 +1033,8 @@ define([
                     itemHeight: 50,
                     menuMaxHeight: 272,
                     enableKeyEvents: true,
-                    cls: 'combo-spark-style'
+                    cls: 'combo-spark-style',
+                    menuCls: 'position-top-left'
                 });
                 this.cmbSparkStyle.render($('#spark-combo-style'));
                 this.cmbSparkStyle.openButton.menu.cmpEl.css({
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
index 4c4590e1b..cede2253f 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
@@ -763,6 +763,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 menuMaxHeight: 272,
                 enableKeyEvents: true,
                 cls: 'combo-spark-style',
+                menuCls: 'position-top-left',
                 minWidth: 190
             });
             this.cmbSparkStyle.render($('#spark-dlg-combo-style'));
diff --git a/apps/spreadsheeteditor/main/app/view/PivotTable.js b/apps/spreadsheeteditor/main/app/view/PivotTable.js
index b274d5da8..86a922445 100644
--- a/apps/spreadsheeteditor/main/app/view/PivotTable.js
+++ b/apps/spreadsheeteditor/main/app/view/PivotTable.js
@@ -245,6 +245,7 @@ define([
 
                 this.pivotStyles = new Common.UI.ComboDataView({
                     cls             : 'combo-pivot-template',
+                    menuCls         : 'position-top-left',
                     enableKeyEvents : true,
                     itemWidth       : 61,
                     itemHeight      : 49,
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index cf2665f40..db91bd9fd 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1157,7 +1157,8 @@ define([
                 itemHeight: 28,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-pattern'
+                cls: 'combo-pattern',
+                menuCls: 'position-top-left'
             });
             this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
                     '<div class="style" id="<%= id %>">',
diff --git a/apps/spreadsheeteditor/main/app/view/SlicerSettings.js b/apps/spreadsheeteditor/main/app/view/SlicerSettings.js
index 124128e73..844d45977 100644
--- a/apps/spreadsheeteditor/main/app/view/SlicerSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/SlicerSettings.js
@@ -639,7 +639,8 @@ define([
                     itemHeight: 49,
                     menuMaxHeight: 235,
                     enableKeyEvents: true,
-                    cls: 'combo-slicer-style'
+                    cls: 'combo-slicer-style',
+                    menuCls: 'position-top-left'
                 });
                 this.btnSlicerStyle.render($('#slicer-btn-style'));
                 this.btnSlicerStyle.openButton.menu.cmpEl.css({
diff --git a/apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js b/apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js
index 72090c8b6..795a52966 100644
--- a/apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js
@@ -65,7 +65,7 @@ define([
             this.template = [
                 '<div class="box">',
                     '<div id="id-dlg-tableoptions-range" class="input-row"  style="margin-bottom: 5px;"></div>',
-                    '<div class="input-row hidden" id="id-dlg-tableoptions-title" style="margin-top: 5px;"></div>',
+                    '<div class="input-row d-none" id="id-dlg-tableoptions-title" style="margin-top: 5px;"></div>',
                     '<label class="" id="id-dlg-tableoptions-lbl" style="margin-top: 5px;">' + this.txtNote + '</label>',
                 '</div>'
             ].join('');
@@ -120,8 +120,8 @@ define([
                     me.inputRange.setValue(settings.range);
                     me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, settings.range);
                 } else {
-                    me.cbTitle.$el && me.cbTitle.$el.removeClass('hidden');
-                    me.lblNote.addClass('hidden');
+                    me.cbTitle.$el && me.cbTitle.$el.removeClass('d-none');
+                    me.lblNote.addClass('d-none');
                     me.setHeight(152);
                     var options = me.api.asc_getAddFormatTableOptions();
                     me.inputRange.setValue(options.asc_getRange());
diff --git a/apps/spreadsheeteditor/main/app/view/TableSettings.js b/apps/spreadsheeteditor/main/app/view/TableSettings.js
index 12cae8351..889d76c62 100644
--- a/apps/spreadsheeteditor/main/app/view/TableSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TableSettings.js
@@ -339,7 +339,7 @@ define([
             this.btnPivot.on('click', _.bind(this.onInsertPivotClick, this));
             this.lockedControls.push(this.btnPivot);
 
-            this.$el.find('.pivot-only').toggleClass('hidden', !this.mode.canFeaturePivot);
+            this.$el.find('.pivot-only').toggleClass('d-none', !this.mode.canFeaturePivot);
 
             $(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
 
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index 6ce4ee7a4..f3ceaf21a 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -1097,7 +1097,8 @@ define([
                 itemHeight: 28,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-pattern'
+                cls: 'combo-pattern',
+                menuCls: 'position-top-left'
             });
             this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
                     '<div class="style" id="<%= id %>">',
@@ -1361,7 +1362,8 @@ define([
                 itemHeight: 50,
                 menuMaxHeight: 300,
                 enableKeyEvents: true,
-                cls: 'combo-textart'
+                cls: 'combo-textart',
+                menuCls: 'position-top-left'
             });
             this.cmbTransform.render($('#textart-combo-transform'));
             this.cmbTransform.openButton.menu.cmpEl.css({
@@ -1498,7 +1500,8 @@ define([
                     menuMaxHeight: 300,
                     enableKeyEvents: true,
                     showLast: false,
-                    cls: 'combo-textart'
+                    cls: 'combo-textart',
+                    menuCls: 'position-top-left'
                 });
                 this.cmbTextArt.render($('#textart-combo-template'));
                 this.cmbTextArt.openButton.menu.cmpEl.css({
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 35fb8bea8..1ce114d80 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -250,7 +250,7 @@ define([
                 var formatTemplate =
                     _.template([
                         '<% _.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">',
                         '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
                         '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
                         '</div></a></li>',
@@ -776,6 +776,8 @@ define([
 
                 me.listStyles = new Common.UI.ComboDataView({
                     cls             : 'combo-styles',
+                    style           : 'position: relative;',
+                    menuCls         : 'position-top-right',
                     enableKeyEvents : true,
                     itemWidth       : 112,
                     itemHeight      : 38,
@@ -814,12 +816,12 @@ define([
                 var formatTemplate =
                     _.template([
                         '<% _.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">',
                         '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
                         '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
                         '</div></a></li>',
                         '<% }); %>',
-                        '<li class="divider">',
+                        '<li class="dropdown-divider">',
                         '<li id="id-toolbar-mnu-item-more-formats" data-value="-1"><a tabindex="-1" type="menuitem">' + me.textMoreFormats + '</a></li>'
                     ].join(''));
 
diff --git a/apps/spreadsheeteditor/main/app_dev.js b/apps/spreadsheeteditor/main/app_dev.js
index d3b10623a..08f9f3083 100644
--- a/apps/spreadsheeteditor/main/app_dev.js
+++ b/apps/spreadsheeteditor/main/app_dev.js
@@ -48,6 +48,7 @@ require.config({
         jquery          : '../vendor/jquery/jquery',
         underscore      : '../vendor/underscore/underscore',
         backbone        : '../vendor/backbone/backbone',
+        popper          : '../vendor/popper/popper',
         bootstrap       : '../vendor/bootstrap/dist/js/bootstrap',
         text            : '../vendor/requirejs-text/text',
         perfectscrollbar: 'common/main/lib/mods/perfect-scrollbar',
@@ -80,7 +81,8 @@ require.config({
         },
         bootstrap: {
             deps: [
-                'jquery'
+                'jquery',
+                'popper'
             ]
         },
         perfectscrollbar: {
@@ -124,7 +126,8 @@ require([
     'jszip',
     'jsziputils',
 	'sockjs',
-	'underscore'
+	'underscore',
+    'popper'
 ], function (Backbone, Bootstrap, Core) {
     Backbone.history.start();
 
diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less
index d73ccfb91..932368a45 100644
--- a/apps/spreadsheeteditor/main/resources/less/app.less
+++ b/apps/spreadsheeteditor/main/resources/less/app.less
@@ -8,6 +8,8 @@
 @import "../../../../common/main/resources/less/asc-mixins.less";
 
 // Bootstrap overwrite
+@import "../../../../../vendor/bootstrap/less/_functions.less";
+@import "../../../../../vendor/bootstrap/less/_variables.less";
 @import "../../../../common/main/resources/less/variables.less";
 
 //
@@ -16,28 +18,29 @@
 
 // Core variables and mixins
 //@import "../../../../vendor/bootstrap/less/variables.less";
-@import "../../../../../vendor/bootstrap/less/mixins.less";
+@import "../../../../../vendor/bootstrap/less/_mixins.less";
+@import "../../../../../vendor/bootstrap/less/_root";
 
 // Reset
-@import "../../../../../vendor/bootstrap/less/normalize.less";
+@import "../../../../../vendor/bootstrap/less/_reboot.less";
 //@import "print.less";
 
 // Core CSS
-@import "../../../../../vendor/bootstrap/less/scaffolding.less";
-@import "../../../../../vendor/bootstrap/less/type.less";
+//@import "../../../../../vendor/bootstrap/less/scaffolding.less";
+@import "../../../../../vendor/bootstrap/less/_type.less";
 //@import "code.less";
 //@import "grid.less";
 //@import "tables.less";
-@import "../../../../../vendor/bootstrap/less/forms.less";
-@import "../../../../../vendor/bootstrap/less/buttons.less";
+@import "../../../../../vendor/bootstrap/less/_forms.less";
+@import "../../../../../vendor/bootstrap/less/_buttons.less";
 
 // Components
-@import "../../../../../vendor/bootstrap/less/component-animations.less";
+@import "../../../../../vendor/bootstrap/less/_transitions.less";
 //@import "glyphicons.less";
-@import "../../../../../vendor/bootstrap/less/dropdowns.less";
-@import "../../../../../vendor/bootstrap/less/button-groups.less";
-@import "../../../../../vendor/bootstrap/less/input-groups.less";
-@import "../../../../../vendor/bootstrap/less/navs.less";
+@import "../../../../../vendor/bootstrap/less/_dropdown.less";
+@import "../../../../../vendor/bootstrap/less/_button-group.less";
+@import "../../../../../vendor/bootstrap/less/_input-group.less";
+@import "../../../../../vendor/bootstrap/less/_nav.less";
 //@import "navbar.less";
 //@import "breadcrumbs.less";
 //@import "pagination.less";
@@ -56,13 +59,13 @@
 
 // Components w/ JavaScript
 //@import "modals.less";
-@import "../../../../../vendor/bootstrap/less/tooltip.less";
+@import "../../../../../vendor/bootstrap/less/_utilities.less";
 //@import "popovers.less";
 //@import "carousel.less";
 
 // Utility classes
-@import "../../../../../vendor/bootstrap/less/utilities.less";
-@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
+@import "../../../../../vendor/bootstrap/less/_utilities.less";
+//@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
 
 //
 // Perfect scrollbar
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 664e0ded7..540d824cb 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -122,7 +122,7 @@
             }
 
             &.devider {
-                .dropdown-menu .dropdown-divider;
+                //.dropdown-menu .dropdown-divider;
                 margin-top: 10px;
                 margin-bottom: 10px;
             }
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 6dadc6928..1016de4c1 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;
 }