[Common] Update bootstrap (fixed review popover)

# Conflicts:
#	apps/common/main/lib/component/ColorButton.js
#	apps/common/main/lib/component/Menu.js
#	apps/common/main/resources/less/header.less
#	apps/documenteditor/main/app/view/Toolbar.js
#	apps/presentationeditor/main/app/view/FileMenuPanels.js
#	apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
#	apps/spreadsheeteditor/main/app/view/FormulaWizard.js

apps/common/main/lib/component/Button.js

@@ -223,7 +223,7 @@ define([
                     templateBtnIcon +
                 '</span>' +
             '</button>' +
-            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
+            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-reference="parent">' +
                 '<span class="btn-fixflex-vcenter">' +
                     '<span class="caption"><%= caption %></span>' +
                     '<i class="caret img-commonctrl"></i>' +
@@ -281,7 +281,7 @@ define([
                         '<% applyicon() %>',
                         '<span class="caption"><%= caption %></span>',
                     '</button>',
-                    '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
+                    '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-reference="parent">',
                         '<i class="caret img-commonctrl"></i>',
                         '<span class="sr-only"></span>',
                     '</button>',
@@ -387,8 +387,8 @@ define([
                     });
 
                     if (modalParents.length > 0) {
-                        me.btnEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                        $(me.btnEl.data('bs.tooltip').getTipElement()).css('z-index', parseInt(modalParents.css('z-index')) + 10);
-                        me.btnMenuEl && me.btnMenuEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                        me.btnMenuEl && $(me.btnMenuEl.data('bs.tooltip').getTipElement()).css('z-index', parseInt(modalParents.css('z-index')) + 10);
                         var onModalClose = function(dlg) {
                             if (modalParents[0] !== dlg.$window[0]) return;
                             var tip = me.btnEl.data('bs.tooltip');
@@ -451,8 +451,9 @@ define([
                         }
 
                         $('button:first', el).toggleClass('active', select);
-                    } else
+                    } else {
-                        $('[data-toggle^=dropdown]', el).toggleClass('active', select);
+                        $('[data-toggle^=dropdown]:not(.dropdown-item)', el).toggleClass('active', select);
+                    }
 
                     el.toggleClass('active', select);
                 };
@@ -469,7 +470,7 @@ define([
                                     tip.hide();
                                 }
                             }
-                            var isOpen = el.hasClass('open');
+                            var isOpen = el.hasClass('show');
                             doSplitSelect(!isOpen, 'arrow', e);
                         }
                     }
@@ -613,13 +614,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());
                         }
                     }
                 }
@@ -676,7 +677,7 @@ define([
         },
 
         setVisible: function(visible) {
-            if (this.cmpEl) this.cmpEl.toggleClass('hidden', !visible);
+            if (this.cmpEl) this.cmpEl.toggleClass('d-none', !visible);
             this.visible = visible;
         },
 
@@ -719,21 +720,21 @@ define([
             });
 
             if (modalParents.length > 0) {
-                this.btnEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                $(this.btnEl.data('bs.tooltip').getTipElement()).css('z-index', parseInt(modalParents.css('z-index')) + 10);
-                this.btnMenuEl && this.btnMenuEl.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                this.btnMenuEl && $(this.btnMenuEl.data('bs.tooltip').getTipElement()).css('z-index', parseInt(modalParents.css('z-index')) + 10);
             }
 
             if (this.disabled || !Common.Utils.isGecko) {
                 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());
                     }
                 }
             }

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>',
@@ -111,7 +111,7 @@ define([
                     additionalAlign: options.additionalAlign,
                     items: (options.additionalItems ? options.additionalItems : []).concat([
                         { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') }
+                        { template: _.template('<a id="' + id + '-color-new" class="dropdown-item" style="">' + this.textNewColor + '</a>') }
                     ])
                 });
                 return menu;

apps/common/main/lib/component/ComboBorderSize.js

@@ -79,10 +79,10 @@ 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"><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 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;">',
@@ -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,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" 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" 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;">',

apps/common/main/lib/component/ComboBox.js

@@ -43,7 +43,7 @@
  *
  *  <div class="input-group input-group-nr combobox" id="id-combobox">
  *      <input type="text" class="form-control">
- *      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+ *      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-reference="parent"><span class="caret"></span></button>
  *      <ul class="dropdown-menu"></ul>
  * </div>
  *
@@ -93,10 +93,10 @@ 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"><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 tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
+                            '<li id="<%= item.id %>" data-value="<%= item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                         '<% }); %>',
                     '</ul>',
                 '</span>'
@@ -148,7 +148,7 @@ define([
                         scope       : me
                     }));
                     if (this.itemsTemplate)
-                        this.cmpEl.find('ul').html(
+                        this.cmpEl.find('.dropdown-menu').html(
                             $(this.itemsTemplate({
                                 items       : items,
                                 scope       : me
@@ -193,7 +193,7 @@ define([
 
                         var modalParents = el.closest('.asc-window');
                         if (modalParents.length > 0) {
-                            el.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                            $(el.data('bs.tooltip').getTipElement()).css('z-index', parseInt(modalParents.css('z-index')) + 10);
                             var onModalClose = function(dlg) {
                                 if (modalParents[0] !== dlg.$window[0]) return;
                                 var tip = el.data('bs.tooltip');
@@ -265,16 +265,18 @@ define([
                 }
 
                 _.delay(function(){
-                    me.cmpEl.addClass('open');
+                    me.cmpEl.addClass('show');
+                    me.cmpEl.find('.dropdown-menu').addClass('show');
                 }, delay || 0);
             },
 
             closeMenu: function() {
-                this.cmpEl.removeClass('open');
+                this.cmpEl.removeClass('show');
+                this.cmpEl.find('.dropdown-menu').removeClass('show');
             },
 
             isMenuOpen: function() {
-                return this.cmpEl.hasClass('open');
+                return this.cmpEl.hasClass('show');
             },
 
             onBeforeShowMenu: function(e) {
@@ -299,7 +301,7 @@ define([
                     }
                 }
 
-                var $list = this.cmpEl.find('ul');
+                var $list = this.cmpEl.find('.dropdown-menu');
                 if ($list.hasClass('menu-absolute')) {
                     var offset = this.cmpEl.offset();
                     $list.css({left: offset.left, top: offset.top + this.cmpEl.outerHeight() + 2});
@@ -310,7 +312,7 @@ define([
             },
 
             onAfterShowMenu: function(e) {
-                var $list = $(this.el).find('ul'),
+                var $list = $(this.el).find('.dropdown-menu'),
                     $selected = $list.find('> li.selected');
 
                 if ($selected.length) {
@@ -323,10 +325,10 @@ define([
                         height = (Math.floor(height/itemHeight) * itemHeight);
                         $list.scrollTop(height);
                     }
-                    setTimeout(function(){$selected.find('a').focus();}, 1);
+                    setTimeout(function(){$selected.find('.dropdown-item').focus();}, 1);
                 } else {
                     var me = this;
-                    setTimeout(function(){me.cmpEl.find('ul li:first a').focus();}, 1);
+                    setTimeout(function(){me.cmpEl.find('.dropdown li:first .dropdown-item').focus();}, 1);
                 }
 
                 if (this.scroller)
@@ -387,7 +389,7 @@ define([
                     (this._search.char !== e.key) && (this._search.full = true);
                     this._search.text += e.key;
                     if (this._search.index===undefined) {
-                        var $items = this.cmpEl.find('ul > li').find('> a');
+                        var $items = this.cmpEl.find('.dropdown-menu > li').find('> .dropdown-item');
                         this._search.index = $items.index($items.filter(':focus'));
                     }
                     this.selectCandidate();
@@ -419,7 +421,7 @@ define([
                     var item = $('#' + itemCandidate.get('id') + ' a', $(this.el));
                     if (this.scroller) {
                         this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
-                        var $list = $(this.el).find('ul');
+                        var $list = $(this.el).find('.dropdown-menu');
                         var itemTop = item.position().top,
                             itemHeight = item.outerHeight(),
                             listHeight = $list.outerHeight();
@@ -446,7 +448,8 @@ define([
 
                     _.delay(function() {
                         me._skipInputChange = true;
-                        me.cmpEl.find('ul li:first a').focus();
+                        var item = me.cmpEl.find('.dropdown-menu li:first .dropdown-item');
+                            item.focus();
                     }, 10);
                 } else if (e.keyCode == Common.UI.Keys.RETURN && $(e.target).val() === me.lastValue){
                     this._input.trigger('change', { reapply: true });
@@ -653,14 +656,14 @@ define([
 
             onResetItems: function() {
                 if (this.itemsTemplate) {
-                    $(this.el).find('ul').html( $(this.itemsTemplate({
+                    $(this.el).find('.dropdown-menu').html( $(this.itemsTemplate({
                         items: this.store.toJSON(),
                         scope: this
                     })));
                 } else {
-                    $(this.el).find('ul').html(_.template([
+                    $(this.el).find('.dropdown-menu').html(_.template([
                         '<% _.each(items, function(item) { %>',
-                           '<li id="<%= item.id %>" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
+                           '<li id="<%= item.id %>" data-value="<%- item.value %>"><a class="dropdown-item" tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                         '<% }); %>'
                     ].join(''))({
                         items: this.store.toJSON(),

apps/common/main/lib/component/ComboBoxFonts.js

@@ -72,12 +72,12 @@ 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"><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="divider">',
+                        '<li class="dropdown-divider">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>">',
-                            '<a class="font-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>',
+                            '<a class="font-item dropdown-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>',
                         '</li>',
                     '<% }); %>',
                     '</ul>',
@@ -208,8 +208,8 @@ define([
 
                     if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
                         _.delay(function() {
-                            var selected = (e.keyCode == Common.UI.Keys.DOWN) ? me.cmpEl.find('ul li.selected').nextAll('li:not(.divider)') : me.cmpEl.find('ul li.selected').prevAll('li:not(.divider)');
+                            var selected = (e.keyCode == Common.UI.Keys.DOWN) ? me.cmpEl.find('ul li.selected').nextAll('li:not(.dropdown-divider)') : me.cmpEl.find('ul li.selected').prevAll('li:not(.dropdown-divider)');
-                            selected = (selected.length>0) ? selected.eq(0) : ((e.keyCode == Common.UI.Keys.DOWN) ? me.cmpEl.find('ul li:not(.divider):first') : me.cmpEl.find('ul li:not(.divider):last'));
+                            selected = (selected.length>0) ? selected.eq(0) : ((e.keyCode == Common.UI.Keys.DOWN) ? me.cmpEl.find('ul li:not(.dropdown-divider):first') : me.cmpEl.find('ul li:not(.dropdown-divider):last'));
                             selected = selected.find('a');
 
                             me._skipInputChange = true;
@@ -390,7 +390,7 @@ define([
             onInsertItem: function(item) {
                 $(this.el).find('ul').prepend(_.template([
                     '<li id="<%= item.id %>">',
-                        '<a class="font-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>',
+                        '<a class="font-item dropdown-item" tabindex="-1" type="menuitem" style="height:<%=scope.getListItemHeight()%>px;"></a>',
                     '</li>'
                 ].join(''))({
                     item: item.attributes,

apps/common/main/lib/component/ComboDataView.js

@@ -51,6 +51,7 @@ define([
         options : {
             id                  : null,
             cls                 : '',
+            menuCls             : '',
             style               : '',
             hint                : false,
             itemWidth           : 80,
@@ -60,7 +61,8 @@ define([
             beforeOpenHandler   : null,
             additionalMenuItems  : null,
             showLast: true,
-            minWidth: -1
+            minWidth: -1,
+            displayMenu: 'static'
         },
 
         template: _.template([
@@ -88,6 +90,8 @@ define([
             this.rendered    = false;
             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',
@@ -105,6 +109,8 @@ 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],
                     items: [
@@ -204,6 +210,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);
@@ -480,7 +491,7 @@ define([
             var picker = this.menuPicker;
             _.each(picker.dataViewItems, function(item) {
                 var tip = item.$el.data('bs.tooltip');
-                if (tip) (tip.tip()).remove();
+                if (tip) $(tip.getTipElement()).remove();
             }, picker);
         }
     })

apps/common/main/lib/component/DataView.js

@@ -448,7 +448,7 @@ define([
                 if (tip) {
                     if (tip.dontShow===undefined)
                         tip.dontShow = true;
-                    (tip.tip()).remove();
+                    $(tip.getTipElement()).remove();
                 }
             }, this);
 
@@ -502,7 +502,7 @@ define([
             if (tip) {
                 if (tip.dontShow===undefined)
                     tip.dontShow = true;
-                (tip.tip()).remove();
+                $(tip.getTipElement()).remove();
             }
             this.stopListening(view);
             view.stopListening();
@@ -534,7 +534,7 @@ define([
             this.lastSelectedRec = null;
 
             var tip = view.$el.data('bs.tooltip');
-            if (tip) (tip.tip()).remove();
+            if (tip) $(tip.getTipElement()).remove();
 
             if (!this.isSuspendEvents) {
                 this.trigger('item:click', this, view, record, e);
@@ -939,7 +939,7 @@ define([
                 if (tip) {
                     if (tip.dontShow===undefined)
                         tip.dontShow = true;
-                    (tip.tip()).remove();
+                    $(tip.getTipElement()).remove();
                 }
             }, this);
             this.dataViewItems = null;
@@ -993,7 +993,7 @@ define([
 
             record.set({selected: true});
             var tip = view.el.data('bs.tooltip');
-            if (tip) (tip.tip()).remove();
+            if (tip) $(tip.getTipElement()).remove();
 
             if (!this.isSuspendEvents) {
                 this.trigger('item:click', this, view.el, record, e);

apps/common/main/lib/component/InputField.js

@@ -169,7 +169,7 @@ define([
                     if (this._input.closest('.asc-window').length>0)
                         var onModalClose = function() {
                             var errorTip = el.find('.input-error').data('bs.tooltip');
-                            if (errorTip) errorTip.tip().remove();
+                            if (errorTip) $(errorTip.getTipElement()).remove();
                             Common.NotificationCenter.off({'modal:close': onModalClose});
                         };
                         Common.NotificationCenter.on({'modal:close': onModalClose});
@@ -338,7 +338,7 @@ define([
                             modalParents = errorBadge.closest('.asc-window'),
                             errorTip = errorBadge.data('bs.tooltip');
 
-                        if (errorTip) errorTip.tip().remove();
+                        if (errorTip) $(errorTip.getTipElement()).remove();
                         errorBadge.attr('data-toggle', 'tooltip');
                         errorBadge.removeData('bs.tooltip');
                         errorBadge.tooltip({
@@ -346,7 +346,7 @@ define([
                             placement   : 'cursor'
                         });
                         if (modalParents.length > 0) {
-                            errorBadge.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                            $(errorBadge.data('bs.tooltip').getTipElement()).css('z-index', parseInt(modalParents.css('z-index')) + 10);
                         }
 
                         return errors;
@@ -367,7 +367,7 @@ define([
                         modalParents = errorBadge.closest('.asc-window'),
                         errorTip = errorBadge.data('bs.tooltip');
 
-                    if (errorTip) errorTip.tip().remove();
+                    if (errorTip) $(errorTip.getTipElement()).remove();
                     errorBadge.attr('data-toggle', 'tooltip');
                     errorBadge.removeData('bs.tooltip');
                     errorBadge.tooltip({
@@ -376,7 +376,7 @@ define([
                     });
 
                     if (modalParents.length > 0) {
-                        errorBadge.data('bs.tooltip').tip().css('z-index', parseInt(modalParents.css('z-index')) + 10);
+                        $(errorBadge.data('bs.tooltip').getTipElement()).css('z-index', parseInt(modalParents.css('z-index')) + 10);
                     }
                 } else {
                     me.cmpEl.removeClass('error');
@@ -480,7 +480,7 @@ define([
                     if (this._input.closest('.asc-window').length>0)
                         var onModalClose = function() {
                             var errorTip = el.find('.input-error').data('bs.tooltip');
-                            if (errorTip) errorTip.tip().remove();
+                            if (errorTip) $(errorTip.getTipElement()).remove();
                             Common.NotificationCenter.off({'modal:close': onModalClose});
                         };
                     Common.NotificationCenter.on({'modal:close': onModalClose});

apps/common/main/lib/component/Menu.js

@@ -44,10 +44,10 @@
  *  Default template
  *
  *  <ul class="dropdown-menu" role="menu">
- *      <li><a href="#">item 1</a></li>-->
+ *      <li><a href="#" class="dropdown-item">item 1</a></li>-->
- *      <li><a href="#">item 2</a></li>-->
+ *      <li><a href="#" class="dropdown-item">item 2</a></li>-->
- *      <li class="divider"></li>-->
+ *      <li class="dropdown-divider"></li>-->
- *      <li><a href="#">item 3</a></li>
+ *      <li><a href="#" class="dropdown-item">item 3</a></li>
  *  </ul>
  *
  *  A useful classes of menu position
@@ -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,11 +169,14 @@ define([
                 this.rendered       = false;
                 this.items          = [];
                 this.offset         = [0, 0];
+                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);
@@ -253,13 +258,6 @@ define([
                         });
                     }
 
-                    menuRoot.css({
-                        position    : 'fixed',
-                        right       : 'auto',
-                        left        : -1000,
-                        top         : -1000
-                    });
-
                     this.parentEl = menuRoot.parent();
 
                     this.parentEl.on('show.bs.dropdown',    _.bind(me.onBeforeShowMenu, me));
@@ -268,10 +266,19 @@ define([
                     this.parentEl.on('hidden.bs.dropdown',  _.bind(me.onAfterHideMenu, me));
                     this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
 
+                    this.parentEl.find('[data-toggle="dropdown"]').data('boundary', $('#viewport')[0]);
+                    this.popperOffset && this.parentEl.find('[data-toggle="dropdown"]').data('offset', this.popperOffset);
+
                     menuRoot.hover(
                         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;
@@ -286,17 +293,19 @@ define([
             },
 
             show: function() {
-                if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) {
+                if (this.rendered && this.parentEl && !this.parentEl.hasClass('show')) {
                     this.cmpEl.dropdown('toggle');
                 }
             },
 
             hide: function() {
                 if (this.rendered && this.parentEl) {
-                    if ( this.parentEl.hasClass('open') )
+                    if ( this.parentEl.hasClass('show') ){
-                        this.cmpEl.dropdown('toggle');
+                        this.parentEl.removeClass('show');
-                    else if (this.parentEl.hasClass('over'))
+                        this.parentEl.find('.dropdown-menu').removeClass('show');
+                    } else if (this.parentEl.hasClass('over')) {
                         this.parentEl.removeClass('over');
+                    }
                 }
             },
 
@@ -511,7 +520,7 @@ define([
             setOffset: function(offsetX, offsetY) {
                 this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
                 this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
-                this.alignPosition();
+                //this.alignPosition();
             },
 
             getOffset: function() {
@@ -545,15 +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 (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) {
                     if (typeof (this.options.restoreHeight) == "number") {
                         if (top + menuH > docH) {
@@ -565,33 +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;
-                    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)
-                    this.options.additionalAlign.call(this, menuRoot, left, top);
-                else {
-                    var _css = {left: Math.ceil(left), top: Math.ceil(top)};
-                    if (!(menuH < docH)) _css['margin-top'] = 0;
 
-                    menuRoot.css(_css);
+                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);
                 }
             },
 
@@ -640,7 +690,7 @@ define([
 
             this.id             = this.options.id || Common.UI.getId();
             this.itemTemplate   = this.options.itemTemplate || _.template([
-                                                                '<a id="<%= id %>" <% if(typeof style !== "undefined") { %> style="<%= style %>" <% } %>',
+                                                                '<a id="<%= id %>" class="dropdown-item" <% if(typeof style !== "undefined") { %> style="<%= style %>" <% } %>',
                                                                     '<% if(typeof canFocused !== "undefined") { %> tabindex="-1" type="menuitem" <% } %>',
                                                                     '<% if(typeof stopPropagation !== "undefined") { %> data-stopPropagation="true" <% } %>',
                                                                     'class="<% if (checked) { %> checked <% } %>" >',
@@ -653,6 +703,7 @@ define([
             this.rendered       = false;
             this.items          = this.options.items || [];
             this.offset         = [0, 0];
+            this.popperOffset   = this.options.popperOffset || '';
             this.menuAlign      = this.options.menuAlign;
             this.menuAlignEl    = this.options.menuAlignEl;
             this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
@@ -715,13 +766,6 @@ define([
                     });
                 }
 
-                menuRoot.css({
-                    position    : 'fixed',
-                    right       : 'auto',
-                    left        : -1000,
-                    top         : -1000
-                });
-
                 this.parentEl = menuRoot.parent();
 
                 this.parentEl.on('show.bs.dropdown',    _.bind(me.onBeforeShowMenu, me));
@@ -730,6 +774,9 @@ define([
                 this.parentEl.on('hidden.bs.dropdown',  _.bind(me.onAfterHideMenu, me));
                 this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
 
+                this.parentEl.find('[data-toggle="dropdown"]').data('boundary', $('#viewport')[0]);
+                this.popperOffset && this.parentEl.find('[data-toggle="dropdown"]').data('offset', this.popperOffset);
+
                 menuRoot.hover(
                     function(e) { me.isOver = true;},
                     function(e) { me.isOver = false; }
@@ -765,14 +812,14 @@ define([
         },
 
         show: function() {
-            if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) {
+            if (this.rendered && this.parentEl && !this.parentEl.hasClass('show')) {
                 this.cmpEl.dropdown('toggle');
             }
         },
 
         hide: function() {
             if (this.rendered && this.parentEl) {
-                if ( this.parentEl.hasClass('open') )
+                if ( this.parentEl.hasClass('show') )
                     this.cmpEl.dropdown('toggle');
                 else if (this.parentEl.hasClass('over'))
                     this.parentEl.removeClass('over');
@@ -973,7 +1020,7 @@ define([
         setOffset: function(offsetX, offsetY) {
             this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
             this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
-            this.alignPosition();
+            this.display === 'static' && this.alignPosition();
         },
 
         getOffset: function() {
@@ -1007,14 +1054,23 @@ 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 (left + menuW > docW)
+            if (menuParent.is('li.dropdown-submenu')) {
+                menuParent.removeClass('dropleft dropright');
+                if (left + menuW > docW) {
+                    menuParent.addClass('dropleft');
+                } else {
+                    menuParent.addClass('dropright');
+                }
+            }
+
+            /*if (left + menuW > docW)
                 if (menuParent.is('li.dropdown-submenu')) {
                     left = offset.left - menuW + 2;
                 } else {
                     left = docW - menuW;
-                }
+                }*/
 
-            if (this.options.restoreHeight) {
+            /*if (this.options.restoreHeight) {
                 if (typeof (this.options.restoreHeight) == "number") {
                     if (top + menuH > docH) {
                         menuRoot.css('max-height', (docH - top) + 'px');
@@ -1039,12 +1095,12 @@ define([
 
                 if (top < 0)
                     top = 0;
-            }
+            }*/
 
-            if (this.options.additionalAlign)
+            /*if (this.options.additionalAlign)
                 this.options.additionalAlign.call(this, menuRoot, left, top);
             else
-                menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)});
+                menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)});*/
         },
 
         clearAll: function() {

apps/common/main/lib/component/MenuItem.js

@@ -45,14 +45,14 @@
  *  Default template
  *
  *  Simple menu item:
- *  <li><a href="#">Caption</a></li>
+ *  <li><a href="#" class="dropdown-item">Caption</a></li>
  *
  *  Separator:
- *  <li class="divider"></li>
+ *  <li class="dropdown-divider"></li>
  *
  *  Menu item with sub-menu:
  *  <li class="dropdown-submenu">
- *      <a href="#">Sub-menu item</a>
+ *      <a href="#" class="dropdown-item">Sub-menu item</a>
  *      <ul class="dropdown-menu"></ul>
  *  </li>
  *
@@ -108,7 +108,7 @@ define([
         tagName : 'li',
 
         template: _.template([
-            '<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >',
+            '<a id="<%= id %>" class="dropdown-item" style="<%= style %>" <% if(menu) { %> data-toggle="dropdown" class="dropdown-toggle" <% } %> <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >',
                 '<% if (!_.isEmpty(iconCls)) { %>',
                     '<span class="menu-item-icon <%= iconCls %>"></span>',
                 '<% } %>',
@@ -152,7 +152,7 @@ define([
             me.trigger('render:before', me);
 
             if (me.caption === '--') {
-                el.addClass('divider');
+                el.addClass('dropdown-divider');
             } else {
                 if (!this.rendered) {
                     el.off('click');
@@ -163,14 +163,15 @@ define([
                         caption : me.caption,
                         iconCls : me.iconCls,
                         style   : me.style,
-                        options : me.options
+                        options : me.options,
+                        menu    : me.menu
                     }));
 
                     if (me.menu) {
                         el.addClass('dropdown-submenu');
 
                         me.menu.render(el);
-                        el.mouseenter(_.bind(me.menu.alignPosition, me.menu));
+                        //el.mouseenter(_.bind(me.menu.alignPosition, me.menu));
 //                        el.focusin(_.bind(me.onFocusItem, me));
                         el.focusout(_.bind(me.onBlurItem, me));
                         el.hover(
@@ -194,22 +195,8 @@ define([
                         el.attr('data-toggle', 'tooltip');
                         el.tooltip({
                             title       : me.options.hint,
-                            placement   : me.options.hintAnchor||function(tip, element) {
+                            placement   : me.options.hintAnchor || 'right',
-                                var pos = this.getPosition(),
+                            offset      : '0, 2'
-                                    actualWidth = tip.offsetWidth,
-                                    actualHeight = tip.offsetHeight,
-                                    innerWidth = Common.Utils.innerWidth(),
-                                    innerHeight = Common.Utils.innerHeight();
-                                var top = pos.top,
-                                    left = pos.left + pos.width + 2;
-                                if (top + actualHeight > innerHeight) {
-                                    top = innerHeight - actualHeight - 2;
-                                }
-                                if (left + actualWidth > innerWidth) {
-                                    left = pos.left - actualWidth - 2;
-                                }
-                                $(tip).offset({top: top,left: left}).addClass('in');
-                            }
                         });
                     }
 

apps/common/main/lib/component/TabBar.js

@@ -649,7 +649,7 @@ define([
                 //left = tab.position().left;
                 //right = left + tab.width();
 
-                return !(left < leftbound) && !(right - rightbound > 0.5);
+                return !(leftbound - left > 0.5) && !(right - rightbound > 0.5);
             }
 
             return false;

apps/common/main/lib/component/Tooltip.js

@@ -100,8 +100,8 @@
             this.$element.tooltip({
                 title       : opts.title,
                 trigger     : 'manual',
-                placement   : opts.placement,
+                placement   : opts.placement || 'cursor',
-                offset      : opts.offset,
+                offset      : opts.offset || 0,
                 cls         : opts.cls,
                 html        : opts.html,
                 hideonclick : opts.hideonclick
@@ -109,7 +109,7 @@
 
             if (opts.hideonclick) {
                 var tip = this.$element.data('bs.tooltip');
-                if (tip) tip.tip().on('click', function() {tip.hide();});
+                if (tip) tip.getTipElement().on('click', function() {tip.hide();});
             }
 
             this.$element.on('shown.bs.tooltip', _.bind(this.onTipShown, this));
@@ -126,12 +126,12 @@
 
         setTitle: function(title) {
             var tip = this.getBSTip();
-            if (tip) tip.options.title = title;
+            if (tip) tip.config.title = title;
         },
 
         updateTitle: function() {
             var tip = this.getBSTip();
-            tip.$tip.find('.tooltip-inner')[tip.options.html ? 'html' : 'text'](tip.options.title);
+            $(tip.getTipElement()).find('.tooltip-inner')[tip.config.html ? 'html' : 'text'](tip.config.title);
         },
 
         getBSTip: function() {
@@ -147,7 +147,7 @@
         },
 
         isVisible: function() {
-            return this.getBSTip().tip().is(':visible');
+            return $(this.getBSTip().getTipElement()).is(':visible');
         }
     });
     Common.UI = Common.UI || {};

apps/common/main/lib/component/TreeView.js

@@ -171,7 +171,7 @@ define([
                 options.store = options.store || new Common.UI.TreeViewStore();
                 options.emptyItemText = options.emptyItemText || '';
                 options.itemTemplate = options.itemTemplate || _.template([
-                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
+                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'd-none' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
                     '<% if (hasSubItems) { %>',
                         '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*16 %>px;"></div>',
                     '<% } %>',

apps/common/main/lib/component/Window.js

@@ -686,9 +686,9 @@ define([
                     var self = this;
                     if (!me.$window.hasClass('notransform')) {
                         me.$window.addClass('notransform');
-                        menuRoot.addClass('hidden');
+                        menuRoot.addClass('d-none');
                         setTimeout(function() {
-                            menuRoot.removeClass('hidden');
+                            menuRoot.removeClass('d-none');
                             menuRoot.css({left: left, top: top});
                             self.options.additionalAlign = null;
                         }, 300);

apps/common/main/lib/extend/Bootstrap.js

@@ -76,11 +76,12 @@ function patchDropDownKeyDown(e) {
     if ($this.is('.disabled, :disabled')) return;
 
     var $parent  = getParent($this);
-    var isActive = $parent.hasClass('open') || $parent.hasClass('over');
+    var $reference = $(e.currentTarget).hasClass('dropdown-item') ? $parent.parent().parent() : $parent;
+    var isActive = $reference.hasClass('open') || $reference.hasClass('show') || $reference.hasClass('over');
 
     if (!isActive || (isActive && e.keyCode == 27)) {
         if (e.which == 27) {
-            $items = $('[role=menu] li.dropdown-submenu.over:visible', $parent);
+            $items = $('[role=menu] li.dropdown-submenu.over:visible', $reference);
             if ($items.length) {
                 $items.eq($items.length-1).removeClass('over');
                 return false;
@@ -88,14 +89,15 @@ function patchDropDownKeyDown(e) {
                 $parent.removeClass('over');
                 $parent.find('> a').focus();
             } else {
-                $parent.find('[data-toggle=dropdown]').focus();
+                $reference.find('[data-toggle=dropdown]:not(.dropdown-item)').focus().click();
+                return false;
             }
         }
         return (isActive) ? $this.click() : undefined;
     }
 
 //    var $items = $('[role=menu] li:not(.divider):visible a', $parent)   - original search function
-    var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', $parent).find('> a');
+    var $items = $('> [role=menu] > li:not(.dropdown-divider):not(.disabled):visible', $reference).find('> a');
 
     if (!$items.length) return;
 
@@ -109,9 +111,9 @@ function patchDropDownKeyDown(e) {
             li.addClass('focused-submenu');
              _.delay(function() {
                  var mnu = $('> [role=menu]', li),
-                    $subitems = mnu.find('> li:not(.divider):not(.disabled):visible > a'),
+                    $subitems = mnu.find('> li:not(.dropdown-divider):not(.disabled):visible > a'),
-                    $dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview'),
+                    $dataviews = mnu.find('> li:not(.dropdown-divider):not(.disabled):visible .dataview'),
-                    $internal_menu = mnu.find('> li:not(.divider):not(.disabled):visible ul.internal-menu');
+                    $internal_menu = mnu.find('> li:not(.dropdown-divider):not(.disabled):visible ul.internal-menu');
                 if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1)
                     ($subitems.index($subitems.filter(':focus'))<0) && $subitems.eq(0).focus();
             }, 250);
@@ -145,7 +147,7 @@ function patchDropDownKeyDownAdditional(e) { // only for formula menu when typin
     if ($this.is('.disabled, :disabled')) return;
 
     var $parent  = getParent($this);
-    var isActive = $parent.hasClass('open') || $parent.hasClass('over');
+    var isActive = $parent.hasClass('show') || $parent.hasClass('over');
 
     if (!isActive || (isActive && (e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 39))) {
 //        if (e.which == 27)
@@ -153,7 +155,7 @@ function patchDropDownKeyDownAdditional(e) { // only for formula menu when typin
         return (isActive) ? $this.click() : undefined;
     }
 
-    var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', $parent).find('> a');
+    var $items = $('> [role=menu] > li:not(.dropdown-divider):not(.disabled):visible', $parent).find('> a');
 
     if (!$items.length) return;
 
@@ -194,14 +196,16 @@ function getParent($this) {
 function clearMenus(isFromInputControl) {
     $('.dropdown-toggle').each(function (e) {
         var $parent = ($(this)).parent();
-        if (!$parent.hasClass('open')) return;
+        if (!$parent.hasClass('show')) return;
         if ($parent.attr('data-value') == 'prevent-canvas-click') {
             $parent.attr('data-value','');
             return;
         }
         $parent.trigger(e = $.Event('hide.bs.dropdown'));
         if (e.isDefaultPrevented()) return;
-        $parent.removeClass('open').trigger('hidden.bs.dropdown', isFromInputControl);
+        $parent.removeClass('show');
+        $parent.find('.dropdown-menu').removeClass('show');
+        $parent.trigger('hidden.bs.dropdown', isFromInputControl);
     })
 }
 

apps/common/main/lib/util/Tip.js

@@ -77,134 +77,191 @@
 *
 */
 
-(function ($) {
+define([
+    'jquery',
+    'popper'
+], function ($, Popper) {
     var _superclass = $.fn.tooltip;
     _superclass.prototype = $.fn.tooltip.Constructor.prototype;
 
-    $.extend($.fn.tooltip.Constructor.DEFAULTS, {
-        container: 'body',
-        delay: {show:500},
-        arrow: false
-    });
-
     var Tip = function (element, options) {
-        this.init('tooltip', element, options);
+        this.init(element, options);
     };
 
-    Tip.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
+    Tip['VERSION'] = $.fn.tooltip.Constructor['VERSION'];
+    Tip['Default'] = $.extend($.fn.tooltip.Constructor['Default'], {container: 'body', delay: {show:500}, arrow: false, boundary: $('#viewport')[0]});
+    Tip['NAME'] = $.fn.tooltip.Constructor['NAME'];
+    Tip['DATA_KEY'] = $.fn.tooltip.Constructor['DATA_KEY'];
+    Tip['Event'] = $.fn.tooltip.Constructor['Event'];
+    Tip['EVENT_KEY'] = $.fn.tooltip.Constructor['EVENT_KEY'];
+    Tip['DefaultType'] = $.fn.tooltip.Constructor['DefaultType'];
+
+    Tip.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype,  {
         constructor: Tip,
         
-        init: function() {
+        init: function(element, config) {
-            _superclass.prototype.init.apply(this, arguments);
+            this._isEnabled = true;
+            this._timeout = 0;
+            this._hoverState = '';
+            this._activeTrigger = {};
+            this._popper = null;
+            this.element = element;
+            if (!config.template) {
+                config.template = config.arrow ?
+                    '<div class="tooltip" role="tooltip">' + '<div class="arrow"></div>' + '<div class="tooltip-inner"></div></div>' :
+                    '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>';
+            }
+            this.config = this._getConfig(config);
+            this.config.popperConfig = {
+                modifiers: {
+                    flip: {
+                        enabled: config.flip ? config.flip.enabled : true,
+                        behavior: this.config.fallbackPlacement,
+                        boundariesElement: $('#viewport')[0]
+                    },
+                    arrow: {
+                        enabled: !!config.arrow
+                    },
+                    offset: {
+                        offset: config.offset ? config.offset : 0
+                    }
+                }
+            };
+            this.tip = null;
 
-            if (this.options.placement == 'cursor') {
+            this._setListeners();
-                if (/hover/.exec(this.options.trigger)) {
+
-                    this.$element.on('mousemove.tooltip', this.options.selector, $.proxy(this.mousemove, this))
+            if (this.config.placement == 'cursor') {
+                if (/hover/.exec(this.config.trigger)) {
+                    $(this.element).on('mousemove.tooltip', this.config.selector, $.proxy(this.mousemove, this));
                 }
             }
 
-            if (this.options.zIndex) {
+            if (this.config.zIndex) {
-                this.tip().css('z-index', this.options.zIndex);
+                $(this.getTipElement()).css('z-index', this.config.zIndex);
             }
 
             var me = this;
             Common.NotificationCenter.on({'layout:changed': function(e){
-                if (!me.options.hideonclick && me.tip().is(':visible'))
+                if (!me.config.hideonclick && $(me.getTipElement()).is(':visible'))
                     me.hide();
             }});
         },
 
         mousemove: function (e) {
-            this.targetXY = [e.clientX*Common.Utils.zoom(), e.clientY*Common.Utils.zoom()];
+            this.mouse = {clientX: e.clientX*Common.Utils.zoom(), clientY: e.clientY*Common.Utils.zoom()};
         },
 
-        leave: function(obj) {
+        _leave: function(event) {
-            _superclass.prototype.leave.apply(this, arguments);
+            _superclass.prototype._leave.apply(this, arguments);
             this.dontShow = undefined;
+            this.mouse = undefined;
         },
 
-        show: function(at) {
+        show: function (at) {
-            if (this.hasContent() && this.enabled && !this.dontShow) {
+            var me = this,
-                if (!this.$element.is(":visible") && this.$element.closest('[role=menu]').length>0) return;
+                prevHoverState = this._hoverState;
-                var $tip = this.tip();
 
-                if (this.options.arrow === false) $tip.addClass('arrow-free');
+            if (this.isWithContent() && this._isEnabled && !this.dontShow) {
-                if (this.options.cls) $tip.addClass(this.options.cls);
 
-                var placementEx = (typeof this.options.placement !== 'function') ? /^([a-zA-Z]+)-?([a-zA-Z]*)$/.exec(this.options.placement) : null;
+                if (!$(this.element).is(":visible") && $(this.element).closest('[role=menu]').length > 0) return;
-                if (!at && placementEx && !placementEx[2].length) {
+
+                var tip = this.getTipElement();
+                if (this.config.cls) $(tip).addClass(this.config.cls);
+
+                var placementEx = (typeof this.config.placement !== 'function') ? /^([a-zA-Z]+)-?([a-zA-Z]*)$/.exec(this.config.placement) : null;
+                if ((!at && placementEx && this.config.placement !== 'cursor') || (typeof this.config.placement === 'function')) {
                     _superclass.prototype.show.apply(this, arguments);
                 } else {
-                    var e = $.Event('show.bs.tooltip');
+                    var showEvent = $.Event(this.constructor.Event.SHOW);
-                    this.$element.trigger(e);
+                    $(this.element).trigger(showEvent);
-                    if (e.isDefaultPrevented()) { return; }
+                    if (showEvent.isDefaultPrevented()) {
-
+                        return;
+                    }
                     this.setContent();
-
+                    if (this.config.animation) {
-                    if (this.options.animation) $tip.addClass('fade');
+                        $(tip).addClass('fade');
-
+                    }
-                    $tip.detach()
+                    var placement = typeof this.config.placement === 'function' ? this.config.placement.call(this, tip, this.element) : this.config.placement;
-                        .css({top: 0, left: 0, display: 'block'});
+                    var container = this._getContainer();
-
+                    $(tip).data(this.constructor.DATA_KEY, this);
-                    this.options.container ?
+                    if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) {
-                        $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element);
+                        $(tip).appendTo(container);
-
+                    }
-                    if (typeof this.options.placement === 'function') {
+                    $(this.element).trigger(this.constructor.Event.INSERTED);
-                        this.options.placement.call(this, $tip[0], this.$element[0]);
+                    if (placement === 'cursor') {
-                    } else if (typeof at == 'object') {
+                        if (typeof at == "object") {
-                        var tp = {top: at[1] + 15, left: at[0] + 18},
+                            var innerWidth = Common.Utils.innerWidth(),
-                            innerWidth = Common.Utils.innerWidth(),
+                                innerHeight = Common.Utils.innerHeight();
-                            innerHeight = Common.Utils.innerHeight();
+                            var tp = {left: at[0], top: at[1]};
-
+                            if (tp.left + $(tip).width() > innerWidth) {
-                        if (tp.left + $tip.width() > innerWidth) {
+                                tp.left = at[0] - $(tip).width()/2 - 10;
-                            tp.left = innerWidth - $tip.width() - 30;
+                            } else {
+                                tp.left = at[0] + $(tip).width()/2 + 18;
+                            }
+                            if (tp.top + $(tip).height() > innerHeight) {
+                                tp.top = innerHeight - $(tip).height() - 30;
+                            } else {
+                                tp.top = at[1] + 15;
+                            }
                         }
-                        if (tp.top + $tip.height() > innerHeight) {
+                        function generateGetBoundingClientRect (x, y) {
-                            tp.top = innerHeight - $tip.height() - 30;
+                            return function () {
+                                return {
+                                    top: y,
+                                    right: x,
+                                    bottom: y,
+                                    left: x,
+                                    width: 0,
+                                    height: 0
+                                }
+                            };
                         }
+                        var virtualElement = {
+                            getBoundingClientRect: generateGetBoundingClientRect(),
+                        };
+                        this._popper = new Popper(virtualElement, tip, {
+                            modifiers: {
+                                offset: this._getOffset(),
+                                arrow: {
+                                    enabled: false
+                                },
+                                preventOverflow: {
+                                    boundariesElement: this.config.boundary
+                                }
+                            },
+                            onCreate: function onCreate() {
+                                if (tp) {
+                                    var x = tp.left;
+                                    var y = tp.top;
+                                    virtualElement.getBoundingClientRect = generateGetBoundingClientRect(x, y);
+                                    me.update();
+                                }
+                            }
+                        });
+                    }
 
-                        $tip.offset(tp).addClass('in');
+                    $(tip).addClass('show');
-                    } else {
-                        var pos = this.getPosition();
 
-                        var actualWidth = $tip[0].offsetWidth,
+                    if ('ontouchstart' in document.documentElement) {
-                            actualHeight = $tip[0].offsetHeight;
+                        $(document.body).children().on('mouseover', null, $.noop);
+                    }
 
-                        switch (placementEx[1]) {
+                    this._hoverState = null;
-                        case 'bottom':  tp = {top: pos.top + pos.height + 10}; break;
+                    $(this.element).trigger(this.constructor.Event.SHOWN);
-                        case 'top':     tp = {top: pos.top - actualHeight - 10}; break;
-                        }
 
-                        switch (placementEx[2]) {
+                    if (prevHoverState === 'out') {
-                        case 'left':    
+                        this._leave(null, this);
-                            tp.left = pos.left; 
+                    }
-                            if (this.$element.outerWidth() <= 18) {tp.left -= 4;} // if button is small move tooltip left
-                            break;
-                        case 'right':   
-                            tp.left = pos.left + pos.width - actualWidth; 
-                            if (this.$element.outerWidth() <= 18) { tp.left += 4;} 
-                            break;
-                        }
 
-                        this.applyPlacement(tp, placementEx[1]);
-                        this.moveArrow();
-
-                        $tip/*.removeClass(orgPlacement)*/
-                            .addClass(placementEx[1])
-                            .addClass(placementEx[0]);
-
-                    } 
-
-                    this.$element.trigger('shown.bs.tooltip');
                 }
-
-                var self = this;
-                clearTimeout(self.timeout);
-                self.timeout = setTimeout(function () {
-                    if (self.hoverState == 'in') self.hide();
-                    self.dontShow = false;
-                }, 5000);
             }
+
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(function () {
+                if (prevHoverState == 'show') me.hide();
+                me.dontShow = false;
+            }, 5000);
         },
 
         moveArrow: function () {
@@ -222,34 +279,44 @@
           }
         },
 
-        enter: function(obj) {
+        _enter: function(event, context) {
-            if (obj.type !== 'mouseenter') return;
+            if (event.type !== 'mouseenter') return;
-            var $target = $(obj.target);
+            var $target = $(event.target);
-            if ($target.is('[role=menu]') || $target.parentsUntil(obj.currentTarget,'[role=menu]').length && obj.target !== obj.currentTarget || this.tip().is(':visible') ) {return;}
+            if ($target.is('[role=menu]') || $target.parentsUntil(event.currentTarget,'[role=menu]').length && event.target !== event.currentTarget || $(this.getTipElement()).is(':visible') ) {return;}
 
-            var self = obj instanceof this.constructor ?
+            var dataKey = this.constructor.DATA_KEY;
-                                obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.tooltip');
+            context = context || $(event.currentTarget).data(dataKey);
 
-            clearTimeout(self.timeout);
+            if (!context) {
-            self.hoverState = 'in';
+                context = new this.constructor(event.currentTarget, this._getDelegateConfig());
-
+                $(event.currentTarget).data(dataKey, context);
-            if (!self.options.delay || !self.options.delay.show) { 
-                self.show(); 
-            } else {
-                self.timeout = setTimeout(function () {
-                    if (self.hoverState == 'in') {
-                        self.show(self.options.placement == 'cursor' ? self.targetXY : undefined);
-                    }
-                }, self.options.delay.show);
             }
+
+            if (event) {
+                context._activeTrigger[event.type === 'focusin' ? 'focus' : 'hover'] = true;
+            }
+
+            if ($(context.getTipElement()).hasClass('show') || context._hoverState === 'show') {
+                context._hoverState = 'show';
+                return;
+            }
+
+            clearTimeout(context._timeout);
+            context._hoverState = 'show';
+
+            if (!context.config.delay || !context.config.delay.show) {
+                context.show();
+                return;
+            }
+
+            context._timeout = setTimeout(function () {
+                if (context._hoverState === 'show') {
+                    context.show(context.config.placement == 'cursor' && context.mouse ? [context.mouse.clientX, context.mouse.clientY] : undefined);
+                }
+            }, context.config.delay.show);
         },
 
-        replaceArrow: function(delta, dimension, position) {
+        /*_getOffset: function (placement, pos, actualWidth, actualHeight) {
-            this.options.arrow === false ?
-                this.arrow().hide() : _superclass.prototype.replaceArrow.apply(this, arguments);
-        },
-
-        getCalculatedOffset: function (placement, pos, actualWidth, actualHeight) {
             var out = _superclass.prototype.getCalculatedOffset.apply(this, arguments);
 
             if (this.options.offset > 0 || this.options.offset < 0) {
@@ -260,7 +327,7 @@
             }
 
             return out;
-        }
+        }*/
     });
 
 
@@ -291,4 +358,4 @@
     return this;
   };
 
-})(window.jQuery);
+});

apps/common/main/lib/view/About.js

@@ -95,7 +95,7 @@ define([
                         '</td>',
                     '</tr>',
                 '</table>',
-                '<table id="id-about-licensee-info" cols="1" style="width: 100%; margin-top: 20px;" class="hidden margin-bottom"><tbody>',
+                '<table id="id-about-licensee-info" cols="1" style="width: 100%; margin-top: 20px;" class="d-none margin-bottom"><tbody>',
                     '<tr>',
                         '<td align="center" class="padding-small"><div id="id-about-company-logo"></div></td>',
                     '</tr>',
@@ -133,7 +133,7 @@ define([
                         '</td>',
                     '</tr>',
                 '</table>',
-                '<table id="id-about-licensor-short" cols="1" style="width: 100%; margin-top: 31px;" class="hidden"><tbody>',
+                '<table id="id-about-licensor-short" cols="1" style="width: 100%; margin-top: 31px;" class="d-none"><tbody>',
                     '<tr>',
                         '<td style="width:50%;"><div class="separator horizontal short left"></div></td>',
                         '<td align="center"><label class="asc-about-header">' + this.txtPoweredBy + '</label></td>',
@@ -198,42 +198,42 @@ define([
                 if (data && typeof data == 'object' && typeof(data.customer)=='object') {
                     var customer = data.customer;
 
-                    $('#id-about-licensor-logo').addClass('hidden');
+                    $('#id-about-licensor-logo').addClass('d-none');
-                    $('#id-about-licensor-short').removeClass('hidden');
+                    $('#id-about-licensor-short').removeClass('d-none');
-                    this.cntLicensorInfo.addClass('hidden');
+                    this.cntLicensorInfo.addClass('d-none');
 
-                    this.cntLicenseeInfo.removeClass('hidden');
+                    this.cntLicenseeInfo.removeClass('d-none');
                     this.cntLicensorInfo.removeClass('margin-bottom');
 
                     var value = customer.name;
                     value && value.length ?
                         this.lblCompanyName.text(value) :
-                        this.lblCompanyName.parents('tr').addClass('hidden');
+                        this.lblCompanyName.parents('tr').addClass('d-none');
 
                     value = customer.address;
                     value && value.length ?
                         this.lblCompanyAddress.text(value) :
-                        this.lblCompanyAddress.parents('tr').addClass('hidden');
+                        this.lblCompanyAddress.parents('tr').addClass('d-none');
 
                     (value = customer.mail) && value.length ?
                         this.lblCompanyMail.attr('href', "mailto:"+value).text(value) :
-                        this.lblCompanyMail.parents('tr').addClass('hidden');
+                        this.lblCompanyMail.parents('tr').addClass('d-none');
 
                     if ((value = customer.www) && value.length) {
                         var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : '';
                         this.lblCompanyUrl.attr('href', http+value).text(value);
                     } else
-                        this.lblCompanyUrl.parents('tr').addClass('hidden');
+                        this.lblCompanyUrl.parents('tr').addClass('d-none');
 
                     (value = customer.info) && value.length ?
                         this.lblCompanyLic.text(value) :
-                        this.lblCompanyLic.parents('tr').addClass('hidden');
+                        this.lblCompanyLic.parents('tr').addClass('d-none');
 
                     (value = customer.logo) && value.length ?
                         this.divCompanyLogo.html('<img src="'+value+'" style="max-width:216px; max-height: 35px;" />') :
-                        this.divCompanyLogo.parents('tr').addClass('hidden');
+                        this.divCompanyLogo.parents('tr').addClass('d-none');
                 } else {
-                    this.cntLicenseeInfo.addClass('hidden');
+                    this.cntLicenseeInfo.addClass('d-none');
                     this.cntLicensorInfo.addClass('margin-bottom');
                 }
             }

apps/common/main/lib/view/Comments.js

@@ -380,12 +380,12 @@ define([
                         btns = $(view.el).find('.btn-resolve');
                     btns.tooltip({title: me.textResolve, placement: 'cursor'});
                     btns.each(function(idx, item){
-                        arr.push($(item).data('bs.tooltip').tip());
+                        arr.push($($(item).data('bs.tooltip').getTipElement()));
                     });
                     btns = $(view.el).find('.btn-resolve-check');
                     btns.tooltip({title: me.textOpenAgain, placement: 'cursor'});
                     btns.each(function(idx, item){
-                        arr.push($(item).data('bs.tooltip').tip());
+                        arr.push($($(item).data('bs.tooltip').getTipElement()));
                     });
                     view.tipsArray = arr;
                 };

apps/common/main/lib/view/History.js

@@ -79,7 +79,7 @@ define([
                 store: this.storeHistory,
                 enableKeyEvents: false,
                 itemTemplate: _.template([
-                    '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'hidden' + '<% } %>' + '" ',
+                    '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'd-none' + '<% } %>' + '" ',
                     'style="display: block; ' + '<% if (!isRevision) { %>' + 'padding-left: 40px;' + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
                         '<div class="user-date"><%= created %></div>',
                         '<% if (markedAsVersion) { %>',
@@ -120,7 +120,7 @@ define([
                 if (record.get('isRevision')) {
                     if (view.btnTip) {
                         view.btnTip.dontShow = true;
-                        view.btnTip.tip().remove();
+                        $(view.btnTip.getTipElement()).remove();
                         view.btnTip = null;
                     }
                     var btns = $(view.el).find('.revision-expand').tooltip({title: (record.get('isExpanded')) ? me.textHide : me.textShow, placement: 'cursor'});

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>',
@@ -120,7 +121,7 @@ define([
 
     close: function(suppressevent) {
         var $window = this.getChild();
-        if (!$window.find('.combobox.open').length) {
+        if (!$window.find('.combobox.show').length) {
             Common.UI.Window.prototype.close.call(this, arguments);
         }
     },

apps/common/main/lib/view/ListSettingsDialog.js

@@ -345,7 +345,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);
             var me = this;

apps/common/main/lib/view/Plugins.js

@@ -59,7 +59,7 @@ define([
                 '<div id="plugins-list" class="">',
                 '</div>',
             '</div>',
-            '<div id="current-plugin-box" class="layout-ct vbox hidden">',
+            '<div id="current-plugin-box" class="layout-ct vbox d-none">',
                 '<div id="current-plugin-header">',
                     '<label></label>',
                     '<div id="id-plugin-close" class="plugin-close img-commonctrl"></div>',
@@ -197,8 +197,8 @@ define([
         openInsideMode: function(name, url, frameId) {
             if (!this.pluginsPanel) return false;
 
-            this.pluginsPanel.toggleClass('hidden', true);
+            this.pluginsPanel.toggleClass('d-none', true);
-            this.currentPluginPanel.toggleClass('hidden', false);
+            this.currentPluginPanel.toggleClass('d-none', false);
 
             this.pluginName.text(name);
             if (!this.iframePlugin) {
@@ -233,7 +233,7 @@ define([
                 this.currentPluginFrame.empty();
                 this.iframePlugin = null;
             }
-            this.currentPluginPanel.toggleClass('hidden', true);
+            this.currentPluginPanel.toggleClass('d-none', true);
             // this.pluginsPanel.toggleClass('hidden', false);
 
             this.fireEvent('plugin:open', [this, 'onboard', 'close']);

apps/common/main/lib/view/ReviewChanges.js

@@ -243,7 +243,7 @@ define([
                     });
 
                     if (!this.appConfig.isRestrictedEdit) {// hide Display mode option for fillForms and commenting mode
-                        var menuTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><%= caption %></div>' +
+                        var menuTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem" class="dropdown-item"><div><%= caption %></div>' +
                             '<% if (options.description !== null) { %><label style="display: block;color: #a5a5a5;cursor: pointer;white-space: normal;"><%= options.description %></label>' +
                             '<% } %></a>');
 
@@ -351,7 +351,7 @@ define([
                 (new Promise(function (accept, reject) {
                     accept();
                 })).then(function(){
-                    var menuTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><%= caption %></div>' +
+                    var menuTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem" class="dropdown-item"><div><%= caption %></div>' +
                         '<% if (options.description !== null) { %><label style="display: block;color: #a5a5a5;cursor: pointer;white-space: normal;"><%= options.description %></label>' +
                         '<% } %></a>');
 

apps/common/main/lib/view/ReviewPopover.js

@@ -261,12 +261,12 @@ define([
                             btns = $(view.el).find('.btn-resolve');
                         btns.tooltip({title: me.textResolve, placement: 'cursor'});
                         btns.each(function (idx, item) {
-                            arr.push($(item).data('bs.tooltip').tip());
+                            arr.push($($(item).data('bs.tooltip').getTipElement()));
                         });
                         btns = $(view.el).find('.btn-resolve-check');
                         btns.tooltip({title: me.textOpenAgain, placement: 'cursor'});
                         btns.each(function (idx, item) {
-                            arr.push($(item).data('bs.tooltip').tip());
+                            arr.push($($(item).data('bs.tooltip').getTipElement()));
                         });
                         view.tipsArray = arr;
                         this.autoHeightTextBox();
@@ -539,7 +539,7 @@ define([
                             btns = $(view.el).find('.btn-goto');
                         btns.tooltip({title: me.textFollowMove, placement: 'cursor'});
                         btns.each(function (idx, item) {
-                            arr.push($(item).data('bs.tooltip').tip());
+                            arr.push($($(item).data('bs.tooltip').getTipElement()));
                         });
                         view.tipsArray = arr;
                     };
@@ -963,7 +963,7 @@ define([
                     } else if (event.keyCode == Common.UI.Keys.DOWN) {
                         if (me.emailMenu && me.emailMenu.rendered && me.emailMenu.isVisible()) {
                             _.delay(function () {
-                                var selected = me.emailMenu.cmpEl.find('li:not(.divider):first');
+                                var selected = me.emailMenu.cmpEl.find('li:not(.dropdown-divider):first');
                                 selected = selected.find('a');
                                 selected.focus();
                             }, 10);

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('');
@@ -234,7 +234,7 @@ define([
             me.cntVisibleSign = $('#id-dlg-sign-visible');
             me.cntInvisibleSign = $('#id-dlg-sign-invisible');
 
-            (me.signType == 'visible') ? me.cntInvisibleSign.addClass('hidden') : me.cntVisibleSign.addClass('hidden');
+            (me.signType == 'visible') ? me.cntInvisibleSign.addClass('d-none') : me.cntVisibleSign.addClass('d-none');
 
             $window.find('.dlg-btn').on('click', _.bind(me.onBtnClick, me));
 
@@ -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);
         },

apps/common/main/lib/view/SymbolTableDialog.js

@@ -410,7 +410,7 @@ define([
 
             this.template = [
                 '<div class="box">',
-                    '<div style="margin-bottom: 16px;" class="'+ (this.special ? '' : 'hidden') +'">',
+                    '<div style="margin-bottom: 16px;" class="'+ (this.special ? '' : 'd-none') +'">',
                         '<button type="button" class="btn btn-text-default auto" id="symbol-table-symbols" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textSymbols,'</button>',
                         '<button type="button" class="btn btn-text-default auto" id="symbol-table-special" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textSpecial,'</button>',
                     '</div>',
@@ -768,7 +768,7 @@ define([
             this.specialList.selectByIndex(0);
 
             this.lblShortCut = $window.find('#symbol-table-lbl-shortcut');
-            this.lblShortCut.toggleClass('hidden', !this.showShortcutKey);
+            this.lblShortCut.toggleClass('d-none', !this.showShortcutKey);
 
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             this.symbolsPanel = $window.find('#symbol-table-pnl-symbols');
@@ -1482,8 +1482,8 @@ define([
         },
 
         ShowHideElem: function(special) {
-            this.symbolsPanel.toggleClass('hidden', special);
+            this.symbolsPanel.toggleClass('d-none', special);
-            this.specialPanel.toggleClass('hidden', !special);
+            this.specialPanel.toggleClass('d-none', !special);
             var me = this;
             _.delay(function(){
                 special ? me.specialList.focus() : me.previewPanel.focus();

apps/common/main/resources/less/buttons.less

@@ -5,6 +5,7 @@
 .btn {
     border-radius: 1px;
     color: @gray-deep;
+    padding: 1px 3px;
 
     .btnsize(@value) {
         min-width: @value;
@@ -43,6 +44,7 @@
     &:focus {
         outline: 0;
         outline-offset: 0;
+        box-shadow: none;
     }
 
     &:active, &.active {
@@ -51,9 +53,11 @@
     }
 
     .caret {
+        display: inline-block;
         width: 7px;
         height: 7px;
         border: 0;
+        vertical-align: middle;
         background-position: @arrow-small-offset-x @arrow-small-offset-y;
         position: relative;
     }
@@ -71,6 +75,7 @@
         &:focus,
         &.focus {
             outline: none;
+            box-shadow: none;
         }
     }
 
@@ -167,7 +172,7 @@
     display: inline-flex;
     flex-direction: column;
 
-    &.open,
+    &.show,
     &.over {
         &.split {
             > .inner-box-icon {
@@ -412,6 +417,7 @@
         + .dropdown-toggle {
             padding: 0 2px;
         }
+        flex: none;
     }
 
     > .dropdown-toggle:first-child {
@@ -430,7 +436,7 @@
         }
     }
 
-    &.open {
+    &.show {
         > .btn-toolbar {
                 //color: lighten(@gray-lighter, 10%);
 
@@ -498,7 +504,7 @@
     &.split {
 
         &.over:not(.disabled),
-        &.open {
+        &.show {
             box-shadow: inset 0 0 0 1px @color-gray;
 
             button:not(.active):not(.btn-text-split-default) {
@@ -521,7 +527,7 @@
             }
         }
 
-        &.open {
+        &.show {
             > button:not(.active) {
                 &:last-of-type {
                     background-color: @color-dark;
@@ -602,6 +608,10 @@
     .box-shadow(none);
     background-color: transparent;
 
+    &:focus {
+        box-shadow: inset 0 0 0 1px @gray;
+    }
+
     &.bg-white {
         background-color: #fff;
     }

apps/common/main/resources/less/combo-dataview.less

@@ -73,7 +73,7 @@
         margin-right: -@combo-dataview-button-width;
         padding-right: @combo-dataview-button-width;
 
-        .border-left-radius(0);
+        #border-left-radius(0);
 
         .dataview {
             height: 46px;

apps/common/main/resources/less/combobox.less

@@ -1,8 +1,8 @@
 .combobox {
     display: block;
 
-    &.input-group-sm .btn { .input-sm(); }
+    &.input-group-sm .btn { .form-control-sm(); }
-    &.input-group-lg .btn { .input-lg(); }
+    &.input-group-lg .btn { .form-control-lg(); }
     &.input-group-nr > .form-control,
     &.input-group-nr > .btn {
         height: @input-height-base;
@@ -51,6 +51,7 @@
     .btn,
     .btn:hover,
     .btn:focus {
+        box-shadow: none;
         border-left: 0;
         border-color: @input-border;
         background-color: transparent;
@@ -61,12 +62,12 @@
     }
 
     .btn-default:not(.disabled),
-    &.open .dropdown-toggle.btn-default {
+    &.show .dropdown-toggle.btn-default {
         background-color: @input-bg;
         border-color: @input-border;
     }
 
-    &.input-group-nr.open:not(.no-highlighted) {
+    &.input-group-nr.show:not(.no-highlighted) {
         & > .form-control,
         & > .btn {
             border-color: @gray-darker;
@@ -115,7 +116,7 @@
             }
         }
 
-        &.divider:first-child {
+        &.dropdown-divider:first-child {
             display: none;
         }
     }
@@ -137,7 +138,7 @@
     }
 }
 
-.open > .combobox.combo-dataview-menu {
+.show > .combobox.combo-dataview-menu {
     &.input-group-nr:not(.no-highlighted) {
         & > .form-control,
         & > .btn {

apps/common/main/resources/less/common.less

@@ -36,4 +36,12 @@ label {
 
 .user-select {
     .user-select(text);
+}
+
+.dropdown-divider {
+    margin: 6.5px 0;
+}
+
+a:not(.dropdown-item), a:not(.dropdown-item):not([href]) {
+    color: @link-color;
 }

apps/common/main/resources/less/dropdown-menu.less

@@ -3,6 +3,9 @@
 }
 
 .dropdown-menu {
+    padding: 5px 0;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+
     &.scrollable-menu {
         height: auto;
         max-height: 400px;
@@ -28,6 +31,7 @@
 
     li {
         & > a {
+            display: block;
             padding: 5px 20px;
             cursor: pointer;
 
@@ -64,6 +68,11 @@
         }
 
         &.disabled {
+            .dropdown-item {
+                pointer-events: none;
+                background-color: transparent;
+                color: @gray;
+            }
             .menu-item-icon {
                 opacity: .4;
             }
@@ -101,10 +110,22 @@
     }
     &.shifted-left {
         li {
-            & > a {
+            & > a:not(.checkable) {
                 padding-left: 12px;
                 padding-right: 12px;
             }
         }
     }
+    &.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;
+    }
 }

apps/common/main/resources/less/dropdown-submenu.less

@@ -2,16 +2,17 @@
     position:relative;
 
     & > .dropdown-menu {
-        top: 0;
-        left: 100%;
-        margin-top: -6px;
-        margin-left: -1px;
       	border-radius:@border-radius-base;
 
         &.pull-right {
             right: 100%;
             left: auto;
         }
+
+        &.static {
+            margin-top: -6px;
+            margin-left: -1px;
+        }
     }
 
     & > a:after {
@@ -35,4 +36,18 @@
     &.over > a:after {
         border-left-color: @dropdown-link-color;
     }
+
+    &.dropright {
+        & > .dropdown-menu {
+            margin-top: -6px;
+            margin-left: -1px;
+        }
+    }
+
+    &.dropleft {
+        & > .dropdown-menu {
+            margin-top: -6px;
+            margin-right: -1px;
+        }
+    }
 }

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;

apps/common/main/resources/less/tooltip.less

@@ -35,13 +35,16 @@
         border-bottom-color: @body-bg;
     }
 }
-
+.tooltip {
+    z-index: 1000;
+}
 .tooltip-inner {
     font-size: 11px;
     background-color: @body-bg;
     color: @gray-deep;
     padding: 5px 12px;
     border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
     .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
     background-clip: padding-box;
 

apps/common/main/resources/less/variables.less

@@ -136,6 +136,8 @@
 // Buttons
 // -------------------------
 
+@enable-caret:                   false;
+
 @btn-font-weight:                normal;
 
 @btn-default-color:              #333;

apps/documenteditor/embed/js/ApplicationController.js

@@ -183,7 +183,7 @@ DE.ApplicationController = new(function(){
                     $ttEl = $('.hyperlink-tooltip');
                     $ttEl.tooltip({'container':'body', 'trigger':'manual'});
                     $ttEl.on('shown.bs.tooltip', function(e) {
-                        $tooltip = $ttEl.data('bs.tooltip').tip();
+                        $tooltip = $($ttEl.data('bs.tooltip').getTipElement());
 
                         $tooltip.css({
                             left: $ttEl.ttpos[0] + ttOffset[0],
@@ -246,7 +246,7 @@ DE.ApplicationController = new(function(){
             $('#idt-fullscreen').hide();
 
         if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl)
-            $('#box-tools').addClass('hidden');
+            $('#box-tools').addClass('d-none');
 
         common.controller.modals.attach({
             share: '#idt-share',

apps/documenteditor/main/app/controller/LeftMenu.js

@@ -806,13 +806,13 @@ define([
                     }
 
                     var statusbar = DE.getController('Statusbar');
-                    var menu_opened = statusbar.statusbar.$el.find('.open > [data-toggle="dropdown"]');
+                    var menu_opened = statusbar.statusbar.$el.find('.show > [data-toggle="dropdown"]');
                     if (menu_opened.length) {
                         $.fn.dropdown.Constructor.prototype.keydown.call(menu_opened[0], e);
                         return false;
                     }
                     if (this.mode.canPlugins && this.leftMenu.panelPlugins) {
-                        menu_opened = this.leftMenu.panelPlugins.$el.find('#menu-plugin-container.open > [data-toggle="dropdown"]');
+                        menu_opened = this.leftMenu.panelPlugins.$el.find('#menu-plugin-container.show > [data-toggle="dropdown"]');
                         if (menu_opened.length) {
                             $.fn.dropdown.Constructor.prototype.keydown.call(menu_opened[0], e);
                             return false;

apps/documenteditor/main/app/controller/Main.js

@@ -1419,7 +1419,7 @@ define([
             onError: function(id, level, errData) {
                 if (id == Asc.c_oAscError.ID.LoadingScriptError) {
                     this.showTips([this.scriptLoadError]);
-                    this.tooltip && this.tooltip.getBSTip().$tip.css('z-index', 10000);
+                    this.tooltip && $(this.tooltip.getBSTip().getTipElement()).css('z-index', 10000);
                     return;
                 }
 

apps/documenteditor/main/app/controller/Toolbar.js

@@ -2580,6 +2580,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>') }
@@ -2636,11 +2637,14 @@ 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 +
+                            {
+                                template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
                                 '" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
-                                equationGroup.get('groupHeight') + 'margin-left:5px;"></div>') }
+                                equationGroup.get('groupHeight') + 'margin-left:5px;"></div>')
+                            }
                         ]
                     })
                 });

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>

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>

apps/documenteditor/main/app/template/RightMenu.template

@@ -30,8 +30,8 @@
         <button id="id-right-menu-shape" class="btn btn-category arrow-left" content-target="id-shape-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button>
         <button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button>
         <button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
-        <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button>
+        <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left d-none" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button>
-        <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
+        <button id="id-right-menu-signature" class="btn btn-category arrow-left d-none" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
-        <button id="id-right-menu-form" class="btn btn-category arrow-left hidden" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
+        <button id="id-right-menu-form" class="btn btn-category arrow-left d-none" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
     </div>
 </div>

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">

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>

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">

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({

apps/documenteditor/main/app/view/DocumentHolder.js

@@ -96,12 +96,22 @@ define([
                     if (!menu.rendered) {
                         // Prepare menu container
                         if (menuContainer.length < 1) {
-                            menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id));
+                            menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" class="dropdown" style="position: absolute; z-index: 10000;"><a class="dropdown-toggle d-none" data-toggle="dropdown" href="#" role="button"></a></div>', menu.id));
                             $(me.el).append(menuContainer);
                         }
 
                         menu.render(menuContainer);
                         menu.cmpEl.attr({tabindex: "-1"});
+
+                        //position without popper
+                        menu.cmpEl.data('display', 'static');
+                        menu.cmpEl.css({'position': 'fixed'});
+
+                        menu.cmpEl.on('click.bs.dropdown', function (event) {
+                            event.preventDefault();
+                            event.stopImmediatePropagation();
+                            Common.UI.Menu.Manager.hideAll();
+                        });
                     }
 
                     menuContainer.css({
@@ -534,8 +544,8 @@ define([
                         }
 
                         if ( recalc ) {
-                            screenTip.tipHeight = screenTip.toolTip.getBSTip().$tip.height();
+                            screenTip.tipHeight = $(screenTip.toolTip.getBSTip().getTipElement()).height();
-                            screenTip.tipWidth = screenTip.toolTip.getBSTip().$tip.width();
+                            screenTip.tipWidth = $(screenTip.toolTip.getBSTip().getTipElement()).width();
                         }
 
                         recalc = false;
@@ -548,7 +558,7 @@ define([
                         } else
                             showPoint[1] -= screenTip.tipHeight;
 
-                        screenTip.toolTip.getBSTip().$tip.css({top: showPoint[1] + 'px', left: showPoint[0] + 'px'});
+                        $(screenTip.toolTip.getBSTip().getTipElement()).css({top: showPoint[1] + 'px', left: showPoint[0] + 'px'});
                     }
                     /** coauthoring begin **/
                     else if (moveData.get_Type()==Asc.c_oAscMouseMoveDataTypes.LockedObject && me.mode.isEdit) { // 2 - locked object
@@ -2877,7 +2887,7 @@ define([
             });
 
             var langTemplate = _.template([
-                '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
+                '<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
                 '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                 '<%= caption %>',
                 '</a>'

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -395,7 +395,7 @@ define([
             var itemsTemplate =
                 _.template([
                     '<% _.each(items, function(item) { %>',
-                    '<li id="<%= item.id %>" data-value="<%= item.value %>" <% if (item.value === "custom") { %> style="border-top: 1px solid #e5e5e5;margin-top: 5px;" <% } %> ><a tabindex="-1" type="menuitem" <% if (typeof(item.checked) !== "undefined" && item.checked) { %> class="checked" <% } %> ><%= scope.getDisplayValue(item) %></a></li>',
+                    '<li id="<%= item.id %>" class="dropdown-item" data-value="<%= item.value %>" <% if (item.value === "custom") { %> style="border-top: 1px solid #e5e5e5;margin-top: 5px;" <% } %> ><a tabindex="-1" type="menuitem" <% if (typeof(item.checked) !== "undefined" && item.checked) { %> class="checked" <% } %> ><%= scope.getDisplayValue(item) %></a></li>',
                     '<% }); %>'
                 ].join(''));
             this.cmbFontRender = new Common.UI.ComboBox({
@@ -1201,7 +1201,7 @@ define([
                     me.trAuthor.before(div);
                     me.authors.push(item);
                 });
-                this.tblAuthor.find('.close').toggleClass('hidden', !this.mode.isEdit);
+                this.tblAuthor.find('.close').toggleClass('d-none', !this.mode.isEdit);
                 !this.mode.isEdit && this._ShowHideInfoItem(this.tblAuthor, !!this.authors.length);
             }
             this.SetDisabled();
@@ -1245,8 +1245,8 @@ define([
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.pnlApply.toggleClass('hidden', !mode.isEdit);
+            this.pnlApply.toggleClass('d-none', !mode.isEdit);
-            this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
+            this.tblAuthor.find('.close').toggleClass('d-none', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
                 this.inputSubject._input.attr('placeholder', '');
@@ -1696,13 +1696,13 @@ define([
 
             var me = this;
             this.templateSignature = _.template([
-                '<table cols="2" width="300" class="<% if (!hasRequested && !hasSigned) { %>hidden<% } %>"">',
+                '<table cols="2" width="300" class="<% if (!hasRequested && !hasSigned) { %>d-none<% } %>"">',
                     '<tr>',
                         '<td colspan="2"><label style="cursor: default;"><%= tipText %></label></td>',
                     '</tr>',
                     '<tr>',
                         '<td><label class="link signature-view-link">' + me.txtView + '</label></td>',
-                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>hidden<% } %>">' + me.txtEdit + '</label></td>',
+                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>d-none<% } %>">' + me.txtEdit + '</label></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -1757,8 +1757,8 @@ define([
 
         setMode: function(mode) {
             this.mode = mode;
-            this.cntSignature.toggleClass('hidden', !this.mode.isSignatureSupport);
+            this.cntSignature.toggleClass('d-none', !this.mode.isSignatureSupport);
-            this.cntPassword.toggleClass('hidden', !this.mode.isPasswordSupport);
+            this.cntPassword.toggleClass('d-none', !this.mode.isPasswordSupport);
         },
 
         setApi: function(o) {
@@ -1819,7 +1819,7 @@ define([
         },
 
         updateEncrypt: function() {
-            this.cntPasswordView.toggleClass('hidden', this.btnAddPwd.isVisible());
+            this.cntPasswordView.toggleClass('d-none', this.btnAddPwd.isVisible());
         },
 
         strProtect: 'Protect Document',

apps/documenteditor/main/app/view/FormsTab.js

@@ -208,7 +208,7 @@ define([
                                 }),
                                 {caption: '--'},
                                 {template: _.template('<div id="id-toolbar-menu-form-color" style="width: 169px; height: 220px; margin: 10px;"></div>')},
-                                {template: _.template('<a id="id-toolbar-menu-new-form-color" style="padding-left:12px;">' + me.textNewColor + '</a>')}
+                                {template: _.template('<a id="id-toolbar-menu-new-form-color" class="dropdown-item" style="padding-left:12px;">' + me.textNewColor + '</a>')}
                             ]
                         }));
                         me.mnuFormsColorPicker = new Common.UI.ThemeColorPalette({

apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js

@@ -189,8 +189,8 @@ define([
         },
 
         ShowHideElem: function(value) {
-            this.externalPanel.toggleClass('hidden', value !== c_oHyperlinkType.WebLink);
+            this.externalPanel.toggleClass('d-none', value !== c_oHyperlinkType.WebLink);
-            this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
+            this.internalPanel.toggleClass('d-none', value !== c_oHyperlinkType.InternalLink);
             var store = this.internalList.store;
             if (value==c_oHyperlinkType.InternalLink) {
                 if (store.length<1) {

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 %>">',

apps/documenteditor/main/app/view/LeftMenu.js

@@ -415,7 +415,8 @@ define([
                     this.devHintInited = true;
                 }
             }
-            this.betaHint && this.betaHint.toggleClass('hidden', !beta);
+
+            this.betaHint && this.betaHint.toggleClass('d-none', !beta);
 
             var btns = this.$el.find('button.btn-category:visible'),
                 lastbtn = (btns.length>0) ? $(btns[btns.length-1]) : null;

apps/documenteditor/main/app/view/ListSettingsDialog.js

@@ -125,7 +125,7 @@ define([
                 '<% } %>',
                 '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="<% if (type != 2) { %> hidden <% } %>" style="width: 50px; padding-right: 10px;">',
+                            '<td class="<% if (type != 2) { %> d-none <% } %>" style="width: 50px; padding-right: 10px;">',
                                 '<label>' + this.textLevel + '</label>',
                                 '<div id="levels-list" class="no-borders" style="width:100%; height:208px;margin-top: 2px; "></div>',
                             '</td>',
@@ -186,7 +186,7 @@ define([
             var itemsTemplate =
                 [
                     '<% _.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">',
                     '<%= item.displayValue %><% if (item.value === Asc.c_oAscNumberingFormat.Bullet) { %><span style="font-family:<%=item.font%>;"><%=item.symbol%></span><% } %>',
                     '</a></li>',
                     '<% }); %>'
@@ -195,7 +195,7 @@ define([
                 '<div class="input-group combobox input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="padding-top:3px; line-height: 14px; cursor: pointer; <%= 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">'].concat(itemsTemplate).concat([
                     '</ul>',
                 '</div>'

apps/documenteditor/main/app/view/ParagraphSettings.js

@@ -470,7 +470,7 @@ define([
         hideTextOnlySettings: function(value) {
             if (this._state.HideTextOnlySettings !== value) {
                 this._state.HideTextOnlySettings = value;
-                this.TextOnlySettings.toggleClass('hidden', value==true);
+                this.TextOnlySettings.toggleClass('d-none', value==true);
             }
         },
 

apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js

@@ -1374,7 +1374,7 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
         },
 
         hideTextOnlySettings: function(value) {
-            this.TextOnlySettings.toggleClass('hidden', value==true);
+            this.TextOnlySettings.toggleClass('d-none', value==true);
             this.btnsCategory[1].setVisible(!value);   // Line & Page Breaks
             this.btnsCategory[2].setVisible(!value);   // Borders
             this.btnsCategory[5].setVisible(!value);   // Paddings

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 %>">',
@@ -1875,14 +1877,14 @@ define([
         hideShapeOnlySettings: function(value) {
             if (this._state.HideShapeOnlySettings !== value) {
                 this._state.HideShapeOnlySettings = value;
-                this.ShapeOnlySettings.toggleClass('hidden', value==true);
+                this.ShapeOnlySettings.toggleClass('d-none', value==true);
             }
         },
 
         hideChangeTypeSettings: function(value) {
             if (this._state.HideChangeTypeSettings !== value) {
                 this._state.HideChangeTypeSettings = value;
-                this.CanChangeType.toggleClass('hidden', value==true);
+                this.CanChangeType.toggleClass('d-none', value==true);
             }
         },
 

apps/documenteditor/main/app/view/SignatureSettings.js

@@ -196,9 +196,9 @@ define([
             this.viewValidList.store.reset(validSignatures);
             this.viewInvalidList.store.reset(invalidSignatures);
 
-            this.$el.find('.requested').toggleClass('hidden', !me._state.hasRequested);
+            this.$el.find('.requested').toggleClass('d-none', !me._state.hasRequested);
-            this.$el.find('.valid').toggleClass('hidden', !me._state.hasValid);
+            this.$el.find('.valid').toggleClass('d-none', !me._state.hasValid);
-            this.$el.find('.invalid').toggleClass('hidden', !me._state.hasInvalid);
+            this.$el.find('.invalid').toggleClass('d-none', !me._state.hasInvalid);
 
             me.disableEditing(me._state.hasValid || me._state.hasInvalid);
         },

apps/documenteditor/main/app/view/Statusbar.js

@@ -219,21 +219,22 @@ define([
                 });
 
                 this.btnZoomUp = new Common.UI.Button({
-                    hintAnchor: 'top-right'
+                    hintAnchor: 'top'
                 });
 
                 this.btnLanguage = new Common.UI.Button({
                     // el: panelLang,
-                    hintAnchor: 'top-left',
+                    hintAnchor: 'top',
                     disabled: true
                 });
 
                 this.langMenu = new Common.UI.MenuSimple({
                     cls: 'lang-menu',
-                    style: 'margin-top:-5px;',
                     restoreHeight: 285,
+                    popperOffset: '0,-2',
+                    style: 'margin-top: -5px;',
                     itemTemplate: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
+                        '<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
                             '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                             '<%= caption %>',
                         '</a>'
@@ -243,8 +244,9 @@ define([
                 });
 
                 this.zoomMenu = new Common.UI.Menu({
-                    style: 'margin-top:-5px;',
                     menuAlign: 'bl-tl',
+                    popperOffset: '0,-2',
+                    style: 'margin-top: -5px;',
                     items: [
                         { caption: "50%", value: 50 },
                         { caption: "75%", value: 75 },

apps/documenteditor/main/app/view/TableOfContentsSettings.js

@@ -109,7 +109,7 @@ define([
                                             '<div id="tableofcontents-tof-from-caption" style="width:220px;">',
                                                 '<div id="tableofcontents-combo-captions" style="display: inline-block; width:129px; margin-bottom: 10px;"></div>',
                                             '</div>',
-                                            '<div id="tableofcontents-tof-from-style" style="width:220px;" class="hidden">',
+                                            '<div id="tableofcontents-tof-from-style" style="width:220px;" class="d-none">',
                                                 '<div id="tableofcontents-combo-tof-styles" style="display: inline-block; width:129px; margin-bottom: 10px;"></div>',
                                             '</div>',
                                             '<div id="tableofcontents-chb-full-caption"></div>',
@@ -118,7 +118,7 @@ define([
                                                 '<label class="input-label">' + me.textLevels + '</label>',
                                                 '<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
                                             '</div>',
-                                            '<div id="tableofcontents-from-styles" class="hidden">',
+                                            '<div id="tableofcontents-from-styles" class="d-none">',
                                                 '<table><tr><td style="height: 25px;">',
                                                         '<label class="input-label" style="width: 144px; margin-left: 23px;">' + me.textStyle + '</label>',
                                                         '<label class="input-label" style="">' + me.textLevel + '</label>',
@@ -245,8 +245,8 @@ define([
                 });
                 this.radioCaption.on('change', _.bind(function(field, newValue, eOpts) {
                     if (newValue) {
-                        this.captionContainer.toggleClass('hidden', !newValue);
+                        this.captionContainer.toggleClass('d-none', !newValue);
-                        this.styleContainer.toggleClass('hidden', newValue);
+                        this.styleContainer.toggleClass('d-none', newValue);
                         this.changeCaption(this.cmbCaptions.getSelectedRecord());
                         this.disableButtons();
                     }
@@ -259,8 +259,8 @@ define([
                 });
                 this.radioStyle.on('change', _.bind(function(field, newValue, eOpts) {
                     if (newValue) {
-                        this.styleContainer.toggleClass('hidden', !newValue);
+                        this.styleContainer.toggleClass('d-none', !newValue);
-                        this.captionContainer.toggleClass('hidden', newValue);
+                        this.captionContainer.toggleClass('d-none', newValue);
                         this.changeTOFStyle(this.cmbTOFStyles.getSelectedRecord());
                         this.disableButtons();
                     }
@@ -314,8 +314,8 @@ define([
                 });
                 this.radioLevels.on('change', _.bind(function(field, newValue, eOpts) {
                     if (newValue) {
-                        this.levelsContainer.toggleClass('hidden', !newValue);
+                        this.levelsContainer.toggleClass('d-none', !newValue);
-                        this.stylesContainer.toggleClass('hidden', newValue);
+                        this.stylesContainer.toggleClass('d-none', newValue);
                         if (this._needUpdateOutlineLevels)
                             this.synchronizeLevelsFromStyles();
                     }
@@ -328,8 +328,8 @@ define([
                 });
                 this.radioStyles.on('change', _.bind(function(field, newValue, eOpts) {
                     if (newValue) {
-                        this.stylesContainer.toggleClass('hidden', !newValue);
+                        this.stylesContainer.toggleClass('d-none', !newValue);
-                        this.levelsContainer.toggleClass('hidden', newValue);
+                        this.levelsContainer.toggleClass('d-none', newValue);
                         if (this._needUpdateStyles)
                             this.synchronizeLevelsFromOutline();
                         this.stylesList.scroller.update({alwaysVisibleY: true});

apps/documenteditor/main/app/view/TableSettings.js

@@ -323,6 +323,7 @@ define([
                 cls: 'btn-icon-default',
                 iconCls: 'btn-edit-table',
                 menu        : new Common.UI.Menu({
+                    cls: 'dropdown-menu-right',
                     menuAlign: 'tr-br',
                     items: [
                         { caption: this.selectRowText, value: 0 },

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});
                 });

apps/documenteditor/main/app/view/Toolbar.js

@@ -265,11 +265,11 @@ define([
                                 {
                                     id: 'id-toolbar-menu-auto-fontcolor',
                                     caption: this.textAutoColor,
-                                    template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
+                                    template: _.template('<a class="dropdown-item" tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
                                 },
                                 {caption: '--'},
                                 {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
-                                {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="">' + this.textNewColor + '</a>')}
+                                {template: _.template('<a id="id-toolbar-menu-new-fontcolor" class="dropdown-item" style="padding-left:12px;">' + this.textNewColor + '</a>')}
                             ]
                         })
                     });
@@ -283,7 +283,7 @@ define([
                         menu: new Common.UI.Menu({
                             items: [
                                 {template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
-                                {template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + this.textNewColor + '</a>')}
+                                {template: _.template('<a id="id-toolbar-menu-new-paracolor" class="dropdown-item" style="padding-left:12px;">' + this.textNewColor + '</a>')}
                             ]
                         })
                     });
@@ -538,7 +538,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);
 
@@ -548,7 +548,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);
 
@@ -667,7 +667,7 @@ define([
                                             }),
                                             {caption: '--'},
                                             {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 220px; margin: 10px;"></div>')},
-                                            {template: _.template('<a id="id-toolbar-menu-new-control-color" style="padding-left:12px;">' + this.textNewColor + '</a>')}
+                                            {template: _.template('<a id="id-toolbar-menu-new-control-color" class="dropdown-item" style="padding-left:12px;">' + this.textNewColor + '</a>')}
                                         ]
                                     })
                                 }
@@ -761,7 +761,7 @@ define([
                     this.toolbarControls.push(this.btnPageOrient);
 
 
-                    var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    var pageMarginsTemplate = _.template('<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
                         '<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
                         '<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
                         '<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
@@ -824,7 +824,7 @@ define([
                     });
                     this.toolbarControls.push(this.btnPageMargins);
 
-                    var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    var pageSizeTemplate = _.template('<a id="<%= id %>" class="dropdown-item" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
                         '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
                         '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
 
@@ -1141,6 +1141,7 @@ define([
 
                     this.listStyles = new Common.UI.ComboDataView({
                         cls: 'combo-styles',
+                        style: 'position: relative;',
                         itemWidth: 104,
                         itemHeight: 38,
 //                hint        : this.tipParagraphStyle,
@@ -2037,7 +2038,7 @@ define([
                 this.mnuColorSchema.items = [];
 
                 var itemTemplate = _.template([
-                    '<a id="<%= id %>"  tabindex="-1" type="menuitem" class="<%= options.cls %>">',
+                    '<a id="<%= id %>"  tabindex="-1" type="menuitem" class="dropdown-item <%= options.cls %>">',
                     '<span class="colors">',
                     '<% _.each(options.colors, function(color) { %>',
                     '<span class="color" style="background: <%= color %>;"></span>',

apps/documenteditor/main/app/view/WatermarkSettingsDialog.js

@@ -345,7 +345,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                     },
                     {caption: '--'},
                         { template: _.template('<div id="watermark-menu-textcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="watermark-menu-textcolor-new">' + this.textNewColor + '</a>') }
+                        { template: _.template('<a id="watermark-menu-textcolor-new" class="dropdown-item">' + this.textNewColor + '</a>') }
                     ]
                 })
             });

apps/documenteditor/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',
@@ -81,7 +82,8 @@ require.config({
         },
         bootstrap: {
             deps: [
-                'jquery'
+                'jquery',
+                'popper'
             ]
         },
         perfectscrollbar: {
@@ -125,7 +127,8 @@ require([
     'jszip',
     'jsziputils',
     'sockjs',
-	'underscore'
+	'underscore',
+    'popper'
 ], function (Backbone, Bootstrap, Core) {
     Backbone.history.start();
 

apps/documenteditor/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";
 
 //
@@ -15,28 +17,30 @@
 // --------------------------------------------------
 
 // Core variables and mixins
-//@import "../../../../vendor/bootstrap/less/variables.less";
+//Bootstrap styles
-@import "../../../../../vendor/bootstrap/less/mixins.less";
 
+//@import "../../../../vendor/bootstrap/less/variables.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/scaffolding.less";
-@import "../../../../../vendor/bootstrap/less/type.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/_forms.less";
-@import "../../../../../vendor/bootstrap/less/buttons.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/_dropdown.less";
-@import "../../../../../vendor/bootstrap/less/button-groups.less";
+@import "../../../../../vendor/bootstrap/less/_button-group.less";
-@import "../../../../../vendor/bootstrap/less/input-groups.less";
+@import "../../../../../vendor/bootstrap/less/_input-group.less";
 //@import "navs.less";
 //@import "navbar.less";
 //@import "breadcrumbs.less";
@@ -56,13 +60,15 @@
 
 // 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/_utilities.less";
-@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
+//@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
+
+
 
 //
 // Perfect scrollbar

apps/documenteditor/main/resources/less/filemenu.less

@@ -38,8 +38,8 @@
 
       }
 
-      &.devider {
+      &.dropdown-divider {
-        .dropdown-menu .divider;
+        //.dropdown-menu .divider;
         margin-top: 10px;
         margin-bottom: 10px;
       }
@@ -162,7 +162,7 @@
         }
       }
 
-      &.divider {
+      &.dropdown-divider {
         height: 10px;
       }
     }
@@ -349,7 +349,7 @@
         }
       }
 
-      &.divider {
+      &.dropdown-divider {
         height: 10px;
       }
     }

apps/documenteditor/main/resources/less/rightmenu.less

@@ -166,13 +166,13 @@
 
 .btn-edit-table                  {background-position: 0      0;}
 button.over .btn-edit-table      {background-position: -28px  0;}
-.btn-group.open .btn-edit-table,
+.btn-group.show .btn-edit-table,
 button.active:not(.disabled) .btn-edit-table,
 button:active:not(.disabled) .btn-edit-table    {background-position: -56px  0;}
 
 .btn-change-shape                  {background-position: 0      -16px;}
 button.over .btn-change-shape      {background-position: -28px  -16px;}
-.btn-group.open .btn-change-shape,
+.btn-group.show .btn-change-shape,
 button.active:not(.disabled) .btn-change-shape,
 button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -16px;}
 

apps/documenteditor/main/resources/less/statusbar.less

@@ -78,6 +78,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;
 

apps/presentationeditor/embed/js/ApplicationController.js

@@ -180,7 +180,7 @@ PE.ApplicationController = new(function(){
                     $ttEl = $('.hyperlink-tooltip');
                     $ttEl.tooltip({'container':'body', 'trigger':'manual'});
                     $ttEl.on('shown.bs.tooltip', function(e) {
-                        $tooltip = $ttEl.data('bs.tooltip').tip();
+                        $tooltip = $($ttEl.data('bs.tooltip').getTipElement());
 
                         $tooltip.css({
                             left: $ttEl.ttpos[0] + ttOffset[0],
@@ -250,7 +250,7 @@ PE.ApplicationController = new(function(){
             $('#idt-fullscreen').hide();
 
         if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl)
-            $('#box-tools').addClass('hidden');
+            $('#box-tools').addClass('d-none');
 
         common.controller.modals.attach({
             share: '#idt-share',

apps/presentationeditor/main/app/controller/Main.js

@@ -1119,7 +1119,7 @@ define([
             onError: function(id, level, errData) {
                 if (id == Asc.c_oAscError.ID.LoadingScriptError) {
                     this.showTips([this.scriptLoadError]);
-                    this.tooltip && this.tooltip.getBSTip().$tip.css('z-index', 10000);
+                    this.tooltip && $(this.tooltip.getBSTip().getTipElement()).css('z-index', 10000);
                     return;
                 }
 

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -1866,6 +1866,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 +

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>

apps/presentationeditor/main/app/template/RightMenu.template

@@ -26,6 +26,6 @@
         <button id="id-right-menu-table" class="btn btn-category arrow-left" content-target="id-table-settings"><i class="icon toolbar__icon btn-menu-table">&nbsp;</i></button>
         <button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button>
         <button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
-        <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
+        <button id="id-right-menu-signature" class="btn btn-category arrow-left d-none" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
     </div>
 </div>

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>

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>

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>

apps/presentationeditor/main/app/template/Toolbar.template

@@ -98,7 +98,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">

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({

apps/presentationeditor/main/app/view/DocumentHolder.js

@@ -94,6 +94,16 @@ define([
 
                         menu.render(menuContainer);
                         menu.cmpEl.attr({tabindex: "-1"});
+
+                        //position without popper
+                        menu.cmpEl.data('display', 'static');
+                        menu.cmpEl.css({'position': 'fixed'});
+
+                        menu.cmpEl.on('click.bs.dropdown', function (event) {
+                            event.preventDefault();
+                            event.stopImmediatePropagation();
+                            Common.UI.Menu.Manager.hideAll();
+                        });
                     }
 
                     menuContainer.css({
@@ -509,13 +519,13 @@ define([
                             }
 
                             if ( recalc ) {
-                                screenTip.tipHeight = screenTip.toolTip.getBSTip().$tip.height();
+                                screenTip.tipHeight = $(screenTip.toolTip.getBSTip().getTipElement()).height();
-                                screenTip.tipWidth = screenTip.toolTip.getBSTip().$tip.width();
+                                screenTip.tipWidth = $(screenTip.toolTip.getBSTip().getTipElement()).width();
                             }
                             showPoint[1] -= screenTip.tipHeight;
                             if (showPoint[0] + screenTip.tipWidth > me._BodyWidth )
                                 showPoint[0] = me._BodyWidth - screenTip.tipWidth;
-                            screenTip.toolTip.getBSTip().$tip.css({top: showPoint[1] + 'px', left: showPoint[0] + 'px'});
+                            $(screenTip.toolTip.getBSTip().getTipElement()).css({top: showPoint[1] + 'px', left: showPoint[0] + 'px'});
                         }
                     }
                     /** coauthoring begin **/

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -1072,7 +1072,7 @@ define([
                     me.trAuthor.before(div);
                     me.authors.push(item);
                 });
-                this.tblAuthor.find('.close').toggleClass('hidden', !this.mode.isEdit);
+                this.tblAuthor.find('.close').toggleClass('d-none', !this.mode.isEdit);
                 !this.mode.isEdit && this._ShowHideInfoItem(this.tblAuthor, !!this.authors.length);
             }
             this.SetDisabled();
@@ -1092,8 +1092,8 @@ define([
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.pnlApply.toggleClass('hidden', !mode.isEdit);
+            this.pnlApply.toggleClass('d-none', !mode.isEdit);
-            this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
+            this.tblAuthor.find('.close').toggleClass('d-none', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
                 this.inputSubject._input.attr('placeholder', '');
@@ -1458,13 +1458,13 @@ define([
 
             var me = this;
             this.templateSignature = _.template([
-                '<table cols="2" width="300" class="<% if (!hasSigned) { %>hidden<% } %>"">',
+                '<table cols="2" width="300" class="<% if (!hasSigned) { %>d-none<% } %>"">',
                     '<tr>',
                         '<td colspan="2"><label style="cursor: default;"><%= tipText %></label></td>',
                     '</tr>',
                     '<tr>',
                         '<td><label class="link signature-view-link">' + me.txtView + '</label></td>',
-                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>hidden<% } %>">' + me.txtEdit + '</label></td>',
+                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>d-none<% } %>">' + me.txtEdit + '</label></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -1519,8 +1519,8 @@ define([
 
         setMode: function(mode) {
             this.mode = mode;
-            this.cntSignature.toggleClass('hidden', !this.mode.isSignatureSupport);
+            this.cntSignature.toggleClass('d-none', !this.mode.isSignatureSupport);
-            this.cntPassword.toggleClass('hidden', !this.mode.isPasswordSupport);
+            this.cntPassword.toggleClass('d-none', !this.mode.isPasswordSupport);
         },
 
         setApi: function(o) {
@@ -1575,7 +1575,7 @@ define([
         },
 
         updateEncrypt: function() {
-            this.cntPasswordView.toggleClass('hidden', this.btnAddPwd.isVisible());
+            this.cntPasswordView.toggleClass('d-none', this.btnAddPwd.isVisible());
         },
 
         strProtect: 'Protect Presentation',

apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js

@@ -80,7 +80,7 @@ define([
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
-                    '<div id="id-internal-link" class="hidden">',
+                    '<div id="id-internal-link" class="d-none">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + '</label>',
                         '</div>',
@@ -285,8 +285,8 @@ define([
         },
 
         ShowHideElem: function(value, url) {
-            this.externalPanel.toggleClass('hidden', value !== c_oHyperlinkType.WebLink);
+            this.externalPanel.toggleClass('d-none', value !== c_oHyperlinkType.WebLink);
-            this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
+            this.internalPanel.toggleClass('d-none', value !== c_oHyperlinkType.InternalLink);
             if (value==c_oHyperlinkType.InternalLink) {
                 if (url===null || url===undefined || url=='' )
                     url = "ppaction://hlinkshowjump?jump=firstslide";

apps/presentationeditor/main/app/view/LeftMenu.js

@@ -378,7 +378,7 @@ define([
                     this.devHintInited = true;
                 }
             }
-            this.developerHint && this.developerHint.toggleClass('hidden', !((mode & Asc.c_oLicenseMode.Trial) || (mode & Asc.c_oLicenseMode.Developer)));
+            this.developerHint && this.developerHint.toggleClass('d-none', !((mode & Asc.c_oLicenseMode.Trial) || (mode & Asc.c_oLicenseMode.Developer)));
 
             if (beta) {
                 if (!this.betaHint) {
@@ -393,7 +393,7 @@ define([
                     this.devHintInited = true;
                 }
             }
-            this.betaHint && this.betaHint.toggleClass('hidden', !beta);
+            this.betaHint && this.betaHint.toggleClass('d-none', !beta);
 
             var btns = this.$el.find('button.btn-category:visible'),
                 lastbtn = (btns.length>0) ? $(btns[btns.length-1]) : null;
@@ -411,7 +411,7 @@ define([
                 !this.devHintInited && $(window).on('resize', _.bind(this.onWindowResize, this));
                 this.devHintInited = true;
             }
-            this.limitHint && this.limitHint.toggleClass('hidden', false);
+            this.limitHint && this.limitHint.toggleClass('d-none', false);
 
             var btns = this.$el.find('button.btn-category:visible'),
                 lastbtn = (btns.length>0) ? $(btns[btns.length-1]) : null;

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 %>">',
@@ -1221,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
             });
@@ -1748,14 +1749,14 @@ define([
         hideShapeOnlySettings: function(value) {
             if (this._state.HideShapeOnlySettings !== value) {
                 this._state.HideShapeOnlySettings = value;
-                this.ShapeOnlySettings.toggleClass('hidden', value==true);
+                this.ShapeOnlySettings.toggleClass('d-none', value==true);
             }
         },
 
         hideChangeTypeSettings: function(value) {
             if (this._state.HideChangeTypeSettings !== value) {
                 this._state.HideChangeTypeSettings = value;
-                this.CanChangeType.toggleClass('hidden', value==true);
+                this.CanChangeType.toggleClass('d-none', value==true);
             }
         },
 

apps/presentationeditor/main/app/view/SignatureSettings.js

@@ -171,8 +171,8 @@ define([
             this.viewValidList.store.reset(validSignatures);
             this.viewInvalidList.store.reset(invalidSignatures);
 
-            this.$el.find('.valid').toggleClass('hidden', !me._state.hasValid);
+            this.$el.find('.valid').toggleClass('d-none', !me._state.hasValid);
-            this.$el.find('.invalid').toggleClass('hidden', !me._state.hasInvalid);
+            this.$el.find('.invalid').toggleClass('d-none', !me._state.hasInvalid);
 
             me.disableEditing(me._state.hasValid || me._state.hasInvalid);
         },

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 %>">',

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({
@@ -146,8 +146,9 @@ define([
                 );
 
                 this.zoomMenu = new Common.UI.Menu({
-                    style: 'margin-top:-5px;',
+                    popperOffset: '0,-2',
                     menuAlign: 'bl-tl',
+                    style: 'margin-top: -5px;margin-bottom: 6px;',
                     items: [
                         { caption: "50%", value: 50 },
                         { caption: "75%", value: 75 },
@@ -238,7 +239,8 @@ define([
                     split: true,
                     menu: new Common.UI.Menu({
                         menuAlign: 'bl-tl',
-                        style: 'margin-top:-5px;',
+                        style: 'margin-top:-5px;margin-bottom:5px;',
+                        popperOffset: '0,-2',
                         items: [
                             {caption: this.textShowBegin, value: 0},
                             {caption: this.textShowCurrent, value: 1},
@@ -250,7 +252,8 @@ define([
                 var panelLang = $('.cnt-lang',this.el);
                 this.langMenu = new Common.UI.MenuSimple({
                     cls: 'lang-menu',
-                    style: 'margin-top:-5px;',
+                    popperOffset: '0,-2',
+                    style: 'margin-top: -5px;margin-bottom: 6px;',
                     restoreHeight: 285,
                     itemTemplate: _.template([
                         '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',

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 %>">',
@@ -1181,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
             });
@@ -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({

apps/presentationeditor/main/app/view/Toolbar.js

@@ -343,7 +343,7 @@ define([
                             cls: 'shifted-left',
                             items: [
                                 {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
-                                {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>')}
+                                {template: _.template('<a id="id-toolbar-menu-new-fontcolor" class="dropdown-item" style="padding-left:12px;">' + me.textNewColor + '</a>')}
                             ]
                         })
                     });
@@ -564,7 +564,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);
 
@@ -813,6 +813,7 @@ define([
 
                     me.listTheme = new Common.UI.ComboDataView({
                         cls: 'combo-styles',
+                        style: 'position: relative;',
                         itemWidth: 85,
                         enableKeyEvents: true,
                         itemHeight: 38,
@@ -1058,6 +1059,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']);
@@ -1329,7 +1331,7 @@ define([
                     mnuColorSchema.items = [];
 
                     var itemTemplate = _.template([
-                        '<a id="<%= id %>" class="<%= options.cls %>" tabindex="-1" type="menuitem">',
+                        '<a id="<%= id %>" class="dropdown-item <%= options.cls %>" tabindex="-1" type="menuitem">',
                         '<span class="colors">',
                         '<% _.each(options.colors, function(color) { %>',
                         '<span class="color" style="background: <%= color %>;"></span>',
@@ -1504,6 +1506,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>')}

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();
 

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/scaffolding.less";
-@import "../../../../../vendor/bootstrap/less/type.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/_forms.less";
-@import "../../../../../vendor/bootstrap/less/buttons.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/_dropdown.less";
-@import "../../../../../vendor/bootstrap/less/button-groups.less";
+@import "../../../../../vendor/bootstrap/less/_button-group.less";
-@import "../../../../../vendor/bootstrap/less/input-groups.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/_utilities.less";
-@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
+//@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
 
 //
 // Perfect scrollbar

apps/presentationeditor/main/resources/less/leftmenu.less

@@ -132,7 +132,7 @@
             }
 
             &.devider {
-                .dropdown-menu .divider;
+                //.dropdown-menu .dropdown-divider;
                 margin-top: 10px;
                 margin-bottom: 10px;
             }
@@ -227,7 +227,7 @@
                         }
                     }
 
-                    &.divider {
+                    &.dropdown-divider {
                         height: 10px;
                     }
                 }
@@ -415,7 +415,7 @@
                         }
                     }
 
-                    &.divider {
+                    &.dropdown-divider {
                         height: 10px;
                     }
                 }

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;
 

apps/spreadsheeteditor/embed/js/ApplicationController.js

@@ -195,7 +195,7 @@ SSE.ApplicationController = new(function(){
             $('#idt-fullscreen').hide();
 
         if ( !embedConfig.saveUrl && permissions.print === false && !embedConfig.shareUrl && !embedConfig.embedUrl && !embedConfig.fullscreenUrl)
-            $('#box-tools').addClass('hidden');
+            $('#box-tools').addClass('d-none');
 
         common.controller.modals.attach({
             share: '#idt-share',
@@ -522,7 +522,7 @@ SSE.ApplicationController = new(function(){
                     $ttEl = $('.hyperlink-tooltip');
                     $ttEl.tooltip({'container': 'body', 'trigger': 'manual'});
                     $ttEl.on('shown.bs.tooltip', function(e) {
-                        $tooltip = $ttEl.data('bs.tooltip').tip();
+                        $tooltip = $($ttEl.data('bs.tooltip').getTipElement());
 
                         $tooltip.css({
                             left: $ttEl.ttpos[0] + ttOffset[0],

apps/spreadsheeteditor/main/app/controller/CellEditor.js

@@ -109,7 +109,7 @@ define([
                 Common.UI.Keys.TAB === e.keyCode || Common.UI.Keys.RETURN === e.keyCode || Common.UI.Keys.ESC === e.keyCode ||
                 Common.UI.Keys.LEFT === e.keyCode || Common.UI.Keys.RIGHT === e.keyCode) {
                 var menu = $('#menu-formula-selection'); // for formula menu
-                if (menu.hasClass('open'))
+                if (menu.hasClass('show'))
                     menu.find('.dropdown-menu').trigger('keydown', e);
             } 
         },

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

@@ -1119,12 +1119,12 @@ define([
                         showPoint = [data.asc_getX(), data.asc_getY()];
                         showPoint[0] += (pos[0] + 6);
                         showPoint[1] += (pos[1] - 20);
-                        showPoint[1] -= hyperlinkTip.ref.getBSTip().$tip.height();
+                        showPoint[1] -= $(hyperlinkTip.ref.getBSTip().getTipElement()).height();
-                        var tipwidth = hyperlinkTip.ref.getBSTip().$tip.width();
+                        var tipwidth = $(hyperlinkTip.ref.getBSTip().getTipElement()).width();
                         if (showPoint[0] + tipwidth > me.tooltips.coauth.bodyWidth )
                             showPoint[0] = me.tooltips.coauth.bodyWidth - tipwidth;
 
-                        hyperlinkTip.ref.getBSTip().$tip.css({
+                        $(hyperlinkTip.ref.getBSTip().getTipElement()).css({
                             top : showPoint[1] + 'px',
                             left: showPoint[0] + 'px'
                         });
@@ -1163,11 +1163,11 @@ define([
                         showPoint[0] += (pos[0] + 6);
                         showPoint[1] += (pos[1] - 20 - row_columnTip.ttHeight);
 
-                        var tipwidth = row_columnTip.ref.getBSTip().$tip.width();
+                        var tipwidth = $(row_columnTip.ref.getBSTip().getTipElement()).width();
                         if (showPoint[0] + tipwidth > me.tooltips.coauth.bodyWidth )
                             showPoint[0] = me.tooltips.coauth.bodyWidth - tipwidth - 20;
 
-                        row_columnTip.ref.getBSTip().$tip.css({
+                        $(row_columnTip.ref.getBSTip().getTipElement()).css({
                             top : showPoint[1] + 'px',
                             left: showPoint[0] + 'px'
                         });
@@ -1288,17 +1288,17 @@ define([
 
                         showPoint = [data.asc_getX() + pos[0] - 10, data.asc_getY() + pos[1] + 20];
 
-                        var tipheight = filterTip.ref.getBSTip().$tip.width();
+                        var tipheight = $(filterTip.ref.getBSTip().getTipElement()).width();
                         if (showPoint[1] + filterTip.ttHeight > me.tooltips.coauth.bodyHeight ) {
                             showPoint[1] = me.tooltips.coauth.bodyHeight - filterTip.ttHeight - 5;
                             showPoint[0] += 20;
                         }
 
-                        var tipwidth = filterTip.ref.getBSTip().$tip.width();
+                        var tipwidth = $(filterTip.ref.getBSTip().getTipElement()).width();
                         if (showPoint[0] + tipwidth > me.tooltips.coauth.bodyWidth )
                             showPoint[0] = me.tooltips.coauth.bodyWidth - tipwidth - 20;
 
-                        filterTip.ref.getBSTip().$tip.css({
+                        $(filterTip.ref.getBSTip().getTipElement()).css({
                             top : showPoint[1] + 'px',
                             left: showPoint[0] + 'px'
                         });
@@ -1336,11 +1336,11 @@ define([
                         showPoint[0] += (pos[0] + 6);
                         showPoint[1] += (pos[1] - 20 - slicerTip.ttHeight);
 
-                        var tipwidth = slicerTip.ref.getBSTip().$tip.width();
+                        var tipwidth = $(slicerTip.ref.getBSTip().getTipElement()).width();
                         if (showPoint[0] + tipwidth > me.tooltips.coauth.bodyWidth )
                             showPoint[0] = me.tooltips.coauth.bodyWidth - tipwidth - 20;
 
-                        slicerTip.ref.getBSTip().$tip.css({
+                        $(slicerTip.ref.getBSTip().getTipElement()).css({
                             top : showPoint[1] + 'px',
                             left: showPoint[0] + 'px'
                         });
@@ -2059,6 +2059,16 @@ define([
 
                     menu.render(menuContainer);
                     menu.cmpEl.attr({tabindex: "-1"});
+
+                    //position without popper
+                    menu.cmpEl.data('display', 'static');
+                    menu.cmpEl.css({'position': 'fixed'});
+
+                    menu.cmpEl.on('click.bs.dropdown', function (event) {
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+                        Common.UI.Menu.Manager.hideAll();
+                    });
                 }
 
                 if (/*!this.mouse.isRightButtonDown &&*/ event.button !== 2) {
@@ -2264,7 +2274,7 @@ define([
                 if (!menu.rendered) {
                     // Prepare menu container
                     if (menuContainer.length < 1) {
-                        menuContainer = $(Common.Utils.String.format('<div id="menu-formula-selection" style="position: absolute; z-index: 10000;" class="no-stop-propagate"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>'));
+                        menuContainer = $(Common.Utils.String.format('<div id="menu-formula-selection" style="position: absolute; z-index: 10000;" class="no-stop-propagate dropdown"><a href="#" class="dropdown-toggle d-none" data-toggle="dropdown"></a></div>'));
                         documentHolderView.cmpEl.append(menuContainer);
                     }
 
@@ -2275,7 +2285,7 @@ define([
                         var li;
                         if (arguments.length>1 && arguments[1] instanceof KeyboardEvent) // when typing in cell editor
                             e = arguments[1];
-                        if (menuContainer.hasClass('open')) {
+                        if (menuContainer.hasClass('show')) {
                             if (e.keyCode == Common.UI.Keys.TAB || e.keyCode == Common.UI.Keys.RETURN && !e.ctrlKey && !e.altKey)
                                 li = menuContainer.find('a.focus').closest('li');
                             else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
@@ -2311,6 +2321,8 @@ define([
 
                     menu.render(menuContainer);
                     menu.cmpEl.attr({tabindex: "-1"});
+                    menu.cmpEl.data('display', 'static');
+                    menu.cmpEl.css('position', 'fixed');
                 }
 
                 var coord  = me.api.asc_getActiveCellCoord(),
@@ -2389,12 +2401,12 @@ define([
                         this.documentHolder.cmpEl.offset().top  - $(window).scrollTop()
                     ],
                     coord  = this.api.asc_getActiveCellCoord(),
-                    showPoint = [coord.asc_getX() + pos[0] - 3, coord.asc_getY() + pos[1] - functip.ref.getBSTip().$tip.height() - 5];
+                    showPoint = [coord.asc_getX() + pos[0] - 3, coord.asc_getY() + pos[1] - $(functip.ref.getBSTip().getTipElement()).height() - 5];
-                var tipwidth = functip.ref.getBSTip().$tip.width();
+                var tipwidth = $(functip.ref.getBSTip().getTipElement()).width();
                 if (showPoint[0] + tipwidth > this.tooltips.coauth.bodyWidth )
                     showPoint[0] = this.tooltips.coauth.bodyWidth - tipwidth;
 
-                functip.ref.getBSTip().$tip.css({
+                $(functip.ref.getBSTip().getTipElement()).css({
                     top : showPoint[1] + 'px',
                     left: showPoint[0] + 'px'
                 });
@@ -2446,12 +2458,12 @@ define([
                         this.documentHolder.cmpEl.offset().top  - $(window).scrollTop()
                     ],
                     coord  = this.api.asc_getActiveCellCoord(),
-                    showPoint = [coord.asc_getX() + pos[0] - 3, coord.asc_getY() + pos[1] - inputtip.ref.getBSTip().$tip.height() - 5];
+                    showPoint = [coord.asc_getX() + pos[0] - 3, coord.asc_getY() + pos[1] - $(inputtip.ref.getBSTip().getTipElement()).height() - 5];
-                var tipwidth = inputtip.ref.getBSTip().$tip.width();
+                var tipwidth = $(inputtip.ref.getBSTip().getTipElement()).width();
                 if (showPoint[0] + tipwidth > this.tooltips.coauth.bodyWidth )
                     showPoint[0] = this.tooltips.coauth.bodyWidth - tipwidth;
 
-                inputtip.ref.getBSTip().$tip.css({
+                $(inputtip.ref.getBSTip().getTipElement()).css({
                     top : showPoint[1] + 'px',
                     left: showPoint[0] + 'px',
                     'z-index': 900

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -1222,7 +1222,7 @@ define([
             onError: function(id, level, errData) {
                 if (id == Asc.c_oAscError.ID.LoadingScriptError) {
                     this.showTips([this.scriptLoadError]);
-                    this.tooltip && this.tooltip.getBSTip().$tip.css('z-index', 10000);
+                    this.tooltip && $(this.tooltip.getBSTip().getTipElement()).css('z-index', 10000);
                     return;
                 }
 

apps/spreadsheeteditor/main/app/controller/Spellcheck.js

@@ -277,13 +277,13 @@ define([
             this.panelSpellcheck.btnChange.setDisabled(arr.length<1 || disabled);
             this.panelSpellcheck.btnIgnore.setDisabled(!word || disabled);
             this.panelSpellcheck.btnToDictionary.setDisabled(!word || disabled);
-            this.panelSpellcheck.lblComplete.toggleClass('hidden', !property || !!word);
+            this.panelSpellcheck.lblComplete.toggleClass('d-none', !property || !!word);
-            this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('hidden'));
+            this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('d-none'));
         },
 
         onApiEditCell: function(state) {
             if (state == Asc.c_oAscCellEditorState.editEnd) {
-                this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('hidden'));
+                this.panelSpellcheck.buttonNext.setDisabled(!this.panelSpellcheck.lblComplete.hasClass('d-none'));
                 this.panelSpellcheck.cmbDictionaryLanguage.setDisabled((this.languages && this.languages.length > 0) ? false : true);
             } else {
                 this.panelSpellcheck.buttonNext.setDisabled(true);

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -2801,6 +2801,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>') }
@@ -2858,6 +2859,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 +

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>

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>