[tryton-commits] [tryton] [default] Remove gap for empty row or column

[Cédric Krier]

details:   https://code.tryton.org/tryton/commit/e58b98a512c2
branch:    default
user:      Cédric Krier <c...@b2ck.com>
date:      Fri Jan 30 10:44:25 2026 +0100
description:
        Remove gap for empty row or column

        The container gap is still applied on invisible element if they are 
defined in
        the template.
        The solution is to fake gap using margin between consecutive elements 
and to
        not display empty elements.
        For column gap the horizontal margin must be compensated with negative 
margin
        on the grid and padding on the elements to avoid to overflow the grid.

        Closes #13852
diffstat:

 sao/src/sao.less     |  28 ++++++++++++++++++++++++++--
 sao/src/view/form.js |  25 +++++++++++++------------
 2 files changed, 39 insertions(+), 14 deletions(-)

diffs (93 lines):

diff -r 3ad051b83ba7 -r e58b98a512c2 sao/src/sao.less
--- a/sao/src/sao.less  Wed Feb 04 10:03:48 2026 +0100
+++ b/sao/src/sao.less  Fri Jan 30 10:44:25 2026 +0100
@@ -1102,12 +1102,36 @@
         display: grid;
         width: 100%;
         height: 100%;
-        column-gap: 5px;
-        row-gap: 5px;
+
+        // fake gap with margins to remove gap on empty
+        column-gap: 0;
+        row-gap: 0;
+        margin-left: -5px;
+        > * {
+            padding-left: 5px;
+        }
+        > * + * {
+            margin-top: 5px;
+            margin-left: 5px;
+        }
+    }
+    .form-hcontainer{
+        > * + * {
+            margin-top: 0;
+        }
+    }
+    .form-vcontainer{
+        > * + * {
+            margin-left: 0;
+        }
     }
     .form-item {
         display: flex;
 
+        &.empty {
+            display: none;
+        }
+
         > .btn {
             margin: 5px 0;
         }
diff -r 3ad051b83ba7 -r e58b98a512c2 sao/src/view/form.js
--- a/sao/src/view/form.js      Wed Feb 04 10:03:48 2026 +0100
+++ b/sao/src/view/form.js      Fri Jan 30 10:44:25 2026 +0100
@@ -720,6 +720,16 @@
             for (i = 0; i < grid_rows.length; i++) {
                 rows.push([]);
             }
+            function set_empty(e) {
+                let empty = true;
+                for (const child of e.children(':not(.tooltip)')) {
+                    if (jQuery(child).css('display') != 'none') {
+                        empty = false;
+                        break;
+                    }
+                }
+                e.toggleClass('empty', empty);
+            };
             var col_start, col_end, row_start, row_end;
             for (var child of this.el.children()) {
                 child = jQuery(child);
@@ -735,27 +745,18 @@
                 for (i = row_start; i < row_end; i++) {
                     rows[i - 1].push(child);
                 }
+                set_empty(child);
             }
             var row, col;
-            var is_empty = function(e) {
-                var empty = true;
-                for (const child of e.children(':not(.tooltip)')) {
-                    if (jQuery(child).css('display') != 'none') {
-                        empty = false;
-                        break;
-                    }
-                }
-                return empty;
-            };
             for (i = 0; i < grid_cols.length; i++) {
                 col = cols[i];
-                if (col.every(is_empty)) {
+                if (col.every(e => e.hasClass('empty'))) {
                     grid_cols[i] = "0px";
                 }
             }
             for (i = 0; i < grid_rows.length; i++) {
                 row = rows[i];
-                if (row.every(is_empty)) {
+                if (row.every(e => e.hasClass('empty'))) {
                     grid_rows[i] = "0px";
                 }
             }