diff --git a/client/src/views/record/kanban.js b/client/src/views/record/kanban.js index d897239265..b5b8fa6c0e 100644 --- a/client/src/views/record/kanban.js +++ b/client/src/views/record/kanban.js @@ -294,6 +294,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { this.adjustMinHeight(); }); + this.$container.on('scroll', () => this.syncHeadScroll()); + this.adjustMinHeight(); if (this.statusFieldIsEditable) { @@ -315,7 +317,7 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { }, initStickableHeader: function () { - var $container = this.$el.find('.kanban-head-container'); + var $container = this.$headContainer = this.$el.find('.kanban-head-container'); var topBarHeight = this.getThemeManager().getParam('navbarHeight') || 30; var screenWidthXs = this.getThemeManager().getParam('screenWidthXs'); @@ -349,6 +351,10 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { $block.hide(); $container.show(); + $container.get(0).scrollLeft = 0; + + $container.childeren(0).css('width', ''); + return; } @@ -359,7 +365,11 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { if (scrollTop < edge) { if (scrollTop > stickTop) { - $container.css('width', width + 'px'); + let containerWidth = this.$container.width(); + + $container.children().css('width', width); + + $container.css('width', containerWidth + 'px'); if (!$container.hasClass('sticked')) { $container.addClass('sticked'); @@ -373,11 +383,20 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { $block.hide(); } } + $container.show(); - } else { + + this.syncHeadScroll(); + } + else { $container.css('width', width + 'px'); $container.hide(); + $block.show(); + + $container.get(0).scrollLeft = 0; + + $container.children().css('width', ''); } }; }, @@ -995,6 +1014,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { let dx = e.originalEvent.clientX - startX; containerEl.scrollLeft = startLeft - dx; + + this.syncHeadScroll(); }); $document.one('mouseup.' + this.cid, () => { @@ -1009,6 +1030,14 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { $(document).off('mousemove.' + this.cid); }, + syncHeadScroll: function () { + if (!this.$headContainer.hasClass('sticked')) { + return; + } + + this.$headContainer.get(0).scrollLeft = this.$container.get(0).scrollLeft; + }, + controlHorizontalScroll: function (e) { if (!this.sortIsStarted) { return; @@ -1052,6 +1081,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { containerEl.scrollLeft = containerEl.scrollLeft + stepActual; + this.syncHeadScroll(); + if (containerEl.scrollLeft + containerEl.offsetWidth === containerEl.scrollWidth) { this.blockScrollControl = false; @@ -1076,6 +1107,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) { containerEl.scrollLeft = containerEl.scrollLeft - stepActual; + this.syncHeadScroll(); + if (containerEl.scrollLeft === 0) { this.blockScrollControl = false; diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less index fbfffc6336..4cc06acac2 100644 --- a/frontend/less/espo/custom.less +++ b/frontend/less/espo/custom.less @@ -478,6 +478,7 @@ div.list-kanban > div > table { top: 0; margin-top: @tob-bar-height; z-index: 4; + overflow: hidden; } }