From 103fa7d7aa8aa221c91c38e1c97aa796f55a2709 Mon Sep 17 00:00:00 2001 From: Adrien Dieudonne Date: Thu, 11 Mar 2021 11:15:18 +0000 Subject: [PATCH] [FIX] web: optional column dropdown out off screen on mobile The left css property computation wasn't usefull for ltr mode and even worse, it introduced a bug when a horizontal bar was present (as often on mobile). The entire width of the table was used to compute the offset even though we only saw part of it (scroll bar). It's why this left css property was too high. We can simply remove this logic as "right: 0" on .o_optional_columns already do the job for the ltr mode. Note that we still need to compute the left property for the rtl mode to put the dropdown menu above the table. Otherwise it will be on his left! Steps to reproduce: - Go to Subscription - Open an existing record - Try to open subscription lines column dropdown => You need to scroll on the right to see it. Related PR: https://github.com/odoo/odoo/pull/62472 Related Task ID: 1929043 closes odoo/odoo#67755 X-original-commit: 87c6f6338d267acaab90705f9d5ca8ad27ae30fd Signed-off-by: Lucas Perais (lpe) --- addons/web/static/src/js/views/list/list_renderer.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js index de1e63c3f0f..6d1b35931bd 100644 --- a/addons/web/static/src/js/views/list/list_renderer.js +++ b/addons/web/static/src/js/views/list/list_renderer.js @@ -1287,12 +1287,12 @@ var ListRenderer = BasicRenderer.extend({ ev.stopPropagation(); this.$('.o_optional_columns .dropdown-toggle').dropdown('toggle'); // Explicitly set left of the optional column dropdown as it is pushed inside - // this.$el, so we need to position it at the end of top right/left corner based - // on language direction. - var left = _t.database.parameters.direction === 'rtl' ? - this.$('.o_optional_columns .o_optional_columns_dropdown').width() : - this.$("table").width(); - this.$('.o_optional_columns').css("left", left); + // this.$el, so we need to position it at the end of top left corner in case of + // rtl language direction. + if (_t.database.parameters.direction === 'rtl') { + var left = this.$('.o_optional_columns .o_optional_columns_dropdown').width(); + this.$('.o_optional_columns').css("left", left); + } }, /** * Manages the keyboard events on the list. If the list is not editable, when the user navigates to