diff --git a/frappe/public/js/frappe/form/grid_row.js b/frappe/public/js/frappe/form/grid_row.js
index d074df6bc0..b92f9de904 100644
--- a/frappe/public/js/frappe/form/grid_row.js
+++ b/frappe/public/js/frappe/form/grid_row.js
@@ -10,6 +10,7 @@ export default class GridRow {
this.columns_list = [];
this.row_check_html = '';
this.make();
+ this.setup_tab_listeners();
}
make() {
let me = this;
@@ -269,11 +270,15 @@ export default class GridRow {
}
});
} else if (this.show_search) {
- this.row_check = $(``).appendTo(this.row);
+ this.row_check = $(`
+
+
+
`).appendTo(this.row);
this.row_index = $(
`
+
`
).appendTo(this.row);
@@ -982,29 +987,7 @@ export default class GridRow {
$col.field_area = $('').appendTo($col).toggle(false);
$col.static_area = $('').appendTo($col).html(txt);
- $(document).ready(function () {
- let $scrollBar = $(".grid-scroll-bar");
- let form_grid = $(".form-grid");
- let grid_container = $(".form-grid-container");
- let grid_scroll_bar_rows = $(".grid-scroll-bar-rows");
- // Make sure the grid container is scrollable
- $scrollBar.on("scroll", function (event) {
- grid_container = $(event.currentTarget).closest(".form-grid-container");
- form_grid = $(event.currentTarget).closest(".form-grid");
- grid_scroll_bar_rows = $(event.currentTarget).closest(".grid-scroll-bar-rows");
-
- var scroll_left = $(this).scrollLeft();
-
- // Sync the form grid's left position with the scroll bar
- form_grid.css("position", "relative");
- form_grid.css("left", -scroll_left + "px");
- $(this).css("margin-left", scroll_left + "px");
- });
-
- $scrollBar.css("width", grid_container.width());
-
- grid_scroll_bar_rows.css("width", form_grid[0].scrollWidth);
- });
+ this.handle_scroll_bar();
// set title attribute to see full label for columns in the heading row
if (!this.doc) {
@@ -1021,6 +1004,51 @@ export default class GridRow {
return $col;
}
+ handle_scroll_bar() {
+ $(document).ready(function () {
+ let $scrollBar = $(".grid-scroll-bar");
+ let form_grid = $(".form-grid");
+ let grid_scroll_bar_rows = $(".grid-scroll-bar-rows");
+ let parent_field_name = "";
+ let grid_width = 0;
+ let grid_body_width = 0;
+ form_grid.each((grid_index, grid) => {
+ parent_field_name = $(grid)
+ .closest("[data-fieldname][data-fieldtype]")
+ .attr("data-fieldname");
+ grid_width = $($(grid)[0]).width();
+ grid_body_width = $(
+ 'div[data-fieldname="' + parent_field_name + '"] .grid-body'
+ ).width();
+
+ $('div[data-fieldname="' + parent_field_name + '"] .grid-scroll-bar').width(
+ grid_width
+ );
+ $('div[data-fieldname="' + parent_field_name + '"] .grid-scroll-bar-rows').width(
+ grid_body_width + (grid_width != grid_body_width ? 30 : 0)
+ );
+ });
+
+ // Make sure the grid container is scrollable
+ $scrollBar.on("scroll", function (event) {
+ grid_scroll_bar_rows = $(event.currentTarget).closest(".grid-scroll-bar-rows");
+
+ var scroll_left = $(this).scrollLeft();
+
+ // Sync the form grid's left position with the scroll bar
+ form_grid.css("position", "relative");
+ form_grid.css("left", -scroll_left + "px");
+ $(this).css("margin-left", scroll_left + "px");
+ });
+ });
+ }
+
+ setup_tab_listeners() {
+ $(".nav-link").on("shown.bs.tab", () => {
+ this.handle_scroll_bar();
+ });
+ }
+
activate() {
this.toggle_editable_row(true);
return this;
diff --git a/frappe/public/scss/common/grid.scss b/frappe/public/scss/common/grid.scss
index 5f02e66e6d..48ac3812d9 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -2,6 +2,7 @@
border: 1px solid var(--table-border-color);
border-radius: var(--border-radius-md);
color: var(--text-color);
+ min-height: 150px;
background-color: var(--subtle-accent);
}
@@ -25,7 +26,7 @@
}
&.with-filter {
- height: 64px;
+ height: 66px;
}
.filter-row {
background-color: var(--bg-color);
@@ -33,7 +34,6 @@
.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);
}
}
@@ -190,6 +190,7 @@
.row-index {
text-align: center;
+ flex-grow: 0;
}
.grid-row > .row {
@@ -230,7 +231,9 @@
--input-disabled-bg: var(--gray-50);
.grid-static-col {
padding: 0px !important;
- height: 32px;
+ }
+ .grid-static-col.row-index {
+ padding: var(--grid-padding) !important;
}
.frappe-control[data-fieldtype="Select"].form-group .select-icon {
@@ -328,6 +331,9 @@
line-height: 1.3 !important;
}
}
+ .data-row div[data-fieldname="options"] {
+ height: 39px;
+ }
}
@media (max-width: 767px) {
@@ -605,39 +611,51 @@
grid-auto-rows: min-content;
.grid-static-col.col-xs-1 {
flex: 1 0 60px;
+ width: 60px;
}
.grid-static-col.col-xs-2 {
- flex: 1 0 90px;
+ flex: 1 0 100px;
+ width: 100px;
}
.grid-static-col.col-xs-3 {
- flex: 1 0 120px;
+ flex: 1 0 140px;
+ width: 140px;
}
.grid-static-col.col-xs-4 {
- flex: 1 0 150px;
+ flex: 1 0 200px;
+ width: 200;
}
.grid-static-col.col-xs-5 {
- flex: 1 0 200px;
+ flex: 1 0 250px;
+ width: 250px;
}
.grid-static-col.col-xs-6 {
- flex: 1 0 250px;
+ flex: 1 0 300px;
+ width: 300px;
}
.grid-static-col.col-xs-7 {
- flex: 1 0 300px;
+ flex: 1 0 350px;
+ width: 350px;
}
.grid-static-col.col-xs-8 {
- flex: 1 0 350px;
+ flex: 1 0 400px;
+ width: 400px;
}
.grid-static-col.col-xs-9 {
- flex: 1 0 400px;
+ flex: 1 0 450px;
+ width: 450px;
}
.grid-static-col.col-xs-10 {
- flex: 1 0 450px;
+ flex: 1 0 500px;
+ width: 500px;
}
.grid-static-col.col-xs-11 {
- flex: 1 0 500px;
+ flex: 1 0 550px;
+ width: 550px;
}
.grid-static-col.col-xs-12 {
- flex: 1 0 550px;
+ flex: 1 0 600px;
+ width: 600px;
}
.grid-row > .row .col:last-child,
.grid-row > .dialog-assignment-row .col:first-child,
@@ -650,10 +668,13 @@
max-width: 40px;
min-width: 40px;
}
+ .grid-heading-row .grid-row .data-row.row,
+ .grid-body .rows .grid-row .data-row.row {
+ justify-content: space-between;
+ }
}
}
.grid-scroll-bar {
- display: none;
overflow-x: auto;
height: 12px;
position: relative;
@@ -670,10 +691,6 @@
}
@media (max-width: map-get($grid-breakpoints, "md")) {
- .grid-scroll-bar {
- display: block;
- }
-
.form-column.col-sm-6 .form-grid {
.row-index {
display: block;