fix: allow 5 column layout in doctype form

(cherry picked from commit d7ab46f)
frappe · Mar 16, 2023 · 7eb3bb4 · 7eb3bb4
1 parent 661820a
commit 7eb3bb4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/frappe/public/js/frappe/form/column.js b/frappe/public/js/frappe/form/column.js
@@ -32,7 +32,12 @@ export default class Column {
 
 	resize_all_columns() {
 		// distribute all columns equally
-		let colspan = cint(12 / this.section.wrapper.find(".form-column").length);
+		let columns = this.section.wrapper.find(".form-column").length;
+		let colspan = cint(12 / columns);
+
+		if (columns == 5) {
+			colspan = 20;
+		}
 
 		this.section.wrapper
 			.find(".form-column")

diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
@@ -371,6 +371,21 @@
 	}
 }
 
+// handle 5 columns in form
+.form-column.col-sm-20 {
+	position: relative;
+	width: 100%;
+	padding-right: 15px;
+	padding-left: 15px;
+}
+
+@media (min-width: map-get($grid-breakpoints, "sm")) {
+	.form-column.col-sm-20 {
+		flex: 0 0 20%;
+		max-width: 20%;
+	}
+}
+
 // above mobile
 @media (min-width: map-get($grid-breakpoints, "md")) {
 	.layout-main .form-column.col-sm-12 > form > .input-max-width {