From a6e0660c2831c87acbca86ca53d946750604c806 Mon Sep 17 00:00:00 2001 From: Osama Shaikh Date: Thu, 27 Nov 2025 11:21:58 +0000 Subject: [PATCH 1/3] fix: horizontal scroll using trackpad gesture and grouped search filters --- .../public/js/enhanced_gridview.bundle.js | 35 +------- .../public/js/grid_row.js | 2 +- .../public/scss/enhanced_gridview.bundle.scss | 90 ++++++++++--------- 3 files changed, 50 insertions(+), 77 deletions(-) diff --git a/frappe_enhanced_gridview/public/js/enhanced_gridview.bundle.js b/frappe_enhanced_gridview/public/js/enhanced_gridview.bundle.js index a6fd3e6..c4f223c 100644 --- a/frappe_enhanced_gridview/public/js/enhanced_gridview.bundle.js +++ b/frappe_enhanced_gridview/public/js/enhanced_gridview.bundle.js @@ -54,7 +54,6 @@ class Custom_Grid extends Grid { -
@@ -103,18 +102,8 @@ class Custom_Grid extends Grid { // enhance slider changes this.form_grid.addClass("relative-important"); this.form_grid_container = this.wrapper.find(".form-grid-container"); - this.enhanced_slider = this.wrapper.find(".enhanced-slider"); - let me = this - this.enhanced_slider.on("input", function (event) { - const value = event.target.value; - me.form_grid.css("left", `-${value}px`) - me.setup_scrollable_width() - }) - - - - + this.setup_add_row(); this.setup_grid_pagination(); @@ -289,28 +278,10 @@ class Custom_Grid extends Grid { passes++; } - // set width of scrollable area - this.setup_scrollable_width() this.verify_overflow_columns_width() } - setup_scrollable_width() { - let width = 200 - this.visible_columns.forEach(column => { - width += column[1] * 50 + 100 - }); - if (width > this.form_grid_container[0].clientWidth) { - this.enhanced_slider.prop("max", width - this.form_grid_container[0].clientWidth) - this.enhanced_slider.prop("style", "display:block") - } else { - this.form_grid.css("left", `0px`) - this.enhanced_slider.prop("max", this.form_grid_container[0].clientWidth) - this.enhanced_slider.prop("style", "display:none") - this.enhanced_slider.prop("value", 0) - } - } - verify_overflow_columns_width() { let width = 200 this.visible_columns.forEach(column => { @@ -319,10 +290,6 @@ class Custom_Grid extends Grid { if (width > this.form_grid_container[0].clientWidth) { this.form_grid_container.addClass('enhanced-grid-container') - this.enhanced_slider.prop("style", "display:block") - } else { - this.enhanced_slider.prop("style", "display:none") - this.enhanced_slider.prop("value", 0) } } diff --git a/frappe_enhanced_gridview/public/js/grid_row.js b/frappe_enhanced_gridview/public/js/grid_row.js index ce39824..483c0dd 100644 --- a/frappe_enhanced_gridview/public/js/grid_row.js +++ b/frappe_enhanced_gridview/public/js/grid_row.js @@ -812,7 +812,7 @@ export default class GridRow { } let $col = $( - '
' + '
' ).appendTo(this.row); let $search_input = $(` diff --git a/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss b/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss index 9bc9cb2..3a3ac4e 100644 --- a/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss +++ b/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss @@ -2,7 +2,8 @@ // overflow-y: auto; border: 1px solid var(--table-border-color); border-radius: var(--border-radius-md); - overflow-x: clip !important; + overflow-x: auto; + overflow-y: hidden; .form-grid { border: none; @@ -22,13 +23,54 @@ } } - .grid-heading-row .grid-static-col, - .grid-heading-row .row-check, - .grid-heading-row .row-index { - height: auto !important; - background-color: var(--subtle-fg); + + /* Match native Frappe exactly */ + /* Copied from frappe/public/common/grid.scss */ + .grid-heading-row { + border-bottom: 1px solid var(--table-border-color); + color: var(--gray-600); + background-color: transparent; + height: 32px; + padding: 0 !important; + border-top-left-radius: var(--border-radius-md); + border-top-right-radius: var(--border-radius-md); + + &.with-filter { + height: 64px; + } + .grid-row{ + background-color: var(--subtle-fg); + min-width: max-content; + } + .filter-row { + background-color: var(--bg-color); + + .search { + // TODO: Align with table grid without overwriting padding if possible + padding: 4px 7px 4px 7px !important; + border-bottom: 1px solid var(--table-border-color); + } + } + + .grid-static-col, + .row-check, + .row-index { + height: 32px; + padding: 6px 8px !important; + } + .grid-static-col { + padding: 6px 8px !important; + .static-area { + &.reqd:after { + content: " *"; + color: var(--red-400); + } + } + } } + + .grid-row { .data-row.row { flex-wrap: nowrap; @@ -94,42 +136,6 @@ min-width: 50px !important; } - } } - - .slidecontainer { - width: 100%; - } - - .enhanced-slider { - -webkit-appearance: none; - width: 100%; - height: 8px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - } - - .enhanced-slider:hover { - opacity: 1; - } - - .enhanced-slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 30%; - height: 5px; - background-color: grey; - cursor: pointer; - } - - .enhanced-slider::-moz-range-thumb { - width: 30%; - height: 5px; - background-color: grey; - cursor: pointer; - } } \ No newline at end of file From 80afd9a5301e139919946f5d31e59962449ec7ef Mon Sep 17 00:00:00 2001 From: Osama Shaikh Date: Thu, 27 Nov 2025 12:32:20 +0000 Subject: [PATCH 2/3] fix: fix scrollbar on child table edit row dialog --- .../public/scss/enhanced_gridview.bundle.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss b/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss index 3a3ac4e..1c562a3 100644 --- a/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss +++ b/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss @@ -138,4 +138,17 @@ } } -} \ No newline at end of file +} + +/* Lock enhanced grid scroll when row dialog is open */ +.form-grid-container.enhanced-grid-container:has(.grid-row-open) { + overflow-x: hidden !important; + overflow-y: hidden !important; + pointer-events: none; +} + +/* Allow interaction inside the opened row form */ +.form-grid-container.enhanced-grid-container:has(.grid-row-open) .form-in-grid, +.form-grid-container.enhanced-grid-container:has(.grid-row-open) .form-in-grid * { + pointer-events: auto; +} From f88b9b5a90f99267a3f32c9ba6adfcb124a05f27 Mon Sep 17 00:00:00 2001 From: Osama Shaikh Date: Sat, 29 Nov 2025 18:51:48 +0000 Subject: [PATCH 3/3] fix: remove scroll in child table dialog --- .../public/scss/enhanced_gridview.bundle.scss | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss b/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss index 1c562a3..0accaf1 100644 --- a/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss +++ b/frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss @@ -2,15 +2,16 @@ // overflow-y: auto; border: 1px solid var(--table-border-color); border-radius: var(--border-radius-md); - overflow-x: auto; overflow-y: hidden; - + overflow-x: unset !important; + .form-grid { border: none; border-radius: unset; } .form-grid.relative-important { + overflow-x: auto; position: relative !important; } @@ -138,17 +139,4 @@ } } -} - -/* Lock enhanced grid scroll when row dialog is open */ -.form-grid-container.enhanced-grid-container:has(.grid-row-open) { - overflow-x: hidden !important; - overflow-y: hidden !important; - pointer-events: none; -} - -/* Allow interaction inside the opened row form */ -.form-grid-container.enhanced-grid-container:has(.grid-row-open) .form-in-grid, -.form-grid-container.enhanced-grid-container:has(.grid-row-open) .form-in-grid * { - pointer-events: auto; -} +} \ No newline at end of file