From 353748c66417e6db7ce9b9d07fa71f8d70a6f9b3 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 14 Nov 2018 13:24:24 +0000 Subject: [FIX] web: handle auto margins for auto more menus The auto more menu feature is used to enforce that all items of a menu stay on one line by adding the ones that would overflow in a dropdown menu. The feature first need to compute the maximum width the menu can have. This computation was not correct as it was not considering auto margins. This is particularly important with BS4 where all standard menus have auto margins. closes odoo/odoo#28683 --- addons/web/static/src/js/core/dom.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) (limited to 'addons/web/static/src/js/core/dom.js') diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js index 725658a351b..2a961596862 100644 --- a/addons/web/static/src/js/core/dom.js +++ b/addons/web/static/src/js/core/dom.js @@ -397,9 +397,10 @@ return { if (options.maxWidth) { maxWidth = options.maxWidth(); } else { - var rect = $el[0].getBoundingClientRect(); + var mLeft = $el.is('.ml-auto, .mx-auto, .m-auto'); + var mRight = $el.is('.mr-auto, .mx-auto, .m-auto'); + maxWidth = computeFloatOuterWidthWithMargins($el[0], mLeft, mRight); var style = window.getComputedStyle($el[0]); - maxWidth = (rect.right - rect.left); maxWidth -= (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth)); maxWidth -= _.reduce($unfoldableItems, function (sum, el) { return sum + computeFloatOuterWidthWithMargins(el); @@ -434,10 +435,17 @@ return { $extraItemsToggle.find('.nav-link').toggleClass('active', $extraItems.children().hasClass('active')); } - function computeFloatOuterWidthWithMargins(el) { + function computeFloatOuterWidthWithMargins(el, mLeft, mRight) { var rect = el.getBoundingClientRect(); var style = window.getComputedStyle(el); - return rect.right - rect.left + parseFloat(style.marginLeft) + parseFloat(style.marginRight); + var outerWidth = rect.right - rect.left; + if (mLeft !== false) { + outerWidth += parseFloat(style.marginLeft); + } + if (mRight !== false) { + outerWidth += parseFloat(style.marginRight); + } + return outerWidth; } }, /** -- cgit v1.2.3