diff --git a/frappe/public/js/frappe/form/grid.js b/frappe/public/js/frappe/form/grid.js
index 306b43f8c8..a834d89bee 100644
--- a/frappe/public/js/frappe/form/grid.js
+++ b/frappe/public/js/frappe/form/grid.js
@@ -41,6 +41,31 @@ export default class Grid {
 		this.is_grid = true;
 		this.debounced_refresh = this.refresh.bind(this);
 		this.debounced_refresh = frappe.utils.debounce(this.debounced_refresh, 100);
+		this.setup_tab_listeners();
+	}
+
+	setup_tab_listeners() {
+		$(".nav-link").on("shown.bs.tab", () => {
+			this.handle_scroll_bar();
+		});
+	}
+	handle_scroll_bar() {
+		frappe.utils.sleep(500).then(() => {
+			let grid_body_width = this.wrapper.find(".grid-body").width();
+
+			let grid_scroll_bar = this.wrapper.find(".grid-scroll-bar");
+
+			let grid_scroll_bar_rows = this.wrapper.find(".grid-scroll-bar-rows");
+
+			grid_scroll_bar.width(this.form_grid.width());
+			grid_scroll_bar_rows.width(grid_body_width);
+
+			grid_scroll_bar.on("scroll", (event) => {
+				// Sync the form grid's left position with the scroll bar
+				this.form_grid.css("position", "relative");
+				this.form_grid.css("left", -$(event.currentTarget).scrollLeft() + "px");
+			});
+		});
 	}
 
 	get perm() {
@@ -172,6 +197,8 @@ export default class Grid {
 			this.form_grid.on("touchend", () => {
 				isTouchScrolling = false;
 			});
+
+			this.handle_scroll_bar();
 		}
 		this.setup_add_row();
 
diff --git a/frappe/public/js/frappe/form/grid_row.js b/frappe/public/js/frappe/form/grid_row.js
index d2720f77f7..2e8f3d8263 100644
--- a/frappe/public/js/frappe/form/grid_row.js
+++ b/frappe/public/js/frappe/form/grid_row.js
@@ -10,7 +10,6 @@ export default class GridRow {
 		this.columns_list = [];
 		this.row_check_html = '<input type="checkbox" class="grid-row-check">';
 		this.make();
-		this.setup_tab_listeners();
 	}
 	make() {
 		let me = this;
@@ -409,12 +408,14 @@ export default class GridRow {
 			this.columns = {};
 			this.update_user_settings_for_grid();
 			this.grid_settings_dialog.hide();
+			this.grid.handle_scroll_bar();
 		});
 
 		this.grid_settings_dialog.set_secondary_action_label(__("Reset to default"));
 		this.grid_settings_dialog.set_secondary_action(() => {
 			this.reset_user_settings_for_grid();
 			this.grid_settings_dialog.hide();
+			this.grid.handle_scroll_bar();
 		});
 	}
 
@@ -987,8 +988,6 @@ export default class GridRow {
 		$col.field_area = $('<div class="field-area"></div>').appendTo($col).toggle(false);
 		$col.static_area = $('<div class="static-area ellipsis"></div>').appendTo($col).html(txt);
 
-		this.handle_scroll_bar();
-
 		// set title attribute to see full label for columns in the heading row
 		if (!this.doc) {
 			$col.attr("title", txt);
@@ -1004,50 +1003,6 @@ 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
-				);
-			});
-
-			// 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");
-			});
-		});
-	}
-
-	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 c58831a076..534d168742 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -625,7 +625,7 @@
 		}
 		.grid-static-col.col-xs-4 {
 			flex: 1 0 200px;
-			width: 200;
+			width: 200px;
 		}
 		.grid-static-col.col-xs-5 {
 			flex: 1 0 250px;