Fix #3469 "12-column grids don't layout correctly in PDF"

orbeon · Feb 9, 2018 · 7945e57 · 7945e57
1 parent 0c46c68
commit 7945e57
Showing 1 changed file with 38 additions and 11 deletions.
diff --git a/form-runner/jvm/src/main/assets/xbl/orbeon/grid/grid.less b/form-runner/jvm/src/main/assets/xbl/orbeon/grid/grid.less
@@ -406,7 +406,8 @@
                 .fr-grid-7  .fr-grid-td[colspan =  "7"],
                 .fr-grid-8  .fr-grid-td[colspan =  "8"],
                 .fr-grid-9  .fr-grid-td[colspan =  "9"],
-                .fr-grid-10 .fr-grid-td[colspan = "10"] {
+                .fr-grid-10 .fr-grid-td[colspan = "10"],
+                .fr-grid-12 .fr-grid-td[colspan = "12"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(1/1);
                 }
@@ -417,7 +418,8 @@
                 .fr-grid-4  .fr-grid-td[colspan = "2"],
                 .fr-grid-6  .fr-grid-td[colspan = "3"],
                 .fr-grid-8  .fr-grid-td[colspan = "4"],
-                .fr-grid-10 .fr-grid-td[colspan = "5"] {
+                .fr-grid-10 .fr-grid-td[colspan = "5"],
+                .fr-grid-12 .fr-grid-td[colspan = "6"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(1/2);
                 }
@@ -426,23 +428,26 @@
             // 1/3
             .fr-grid-3,
                 .fr-grid-6 .fr-grid-td[colspan = "2"],
-                .fr-grid-9 .fr-grid-td[colspan = "3"] {
+                .fr-grid-9 .fr-grid-td[colspan = "3"],
+                .fr-grid-12 .fr-grid-td[colspan = "4"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(1/3);
                 }
             }
 
             // 1/4
             .fr-grid-4,
-                .fr-grid-8 .fr-grid-td[colspan = "2"] {
+                .fr-grid-8 .fr-grid-td[colspan = "2"],
+                .fr-grid-12 .fr-grid-td[colspan = "3"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(1/4);
                 }
             }
 
             // 3/4
             .fr-grid-4 .fr-grid-td[colspan = "3"],
-            .fr-grid-8 .fr-grid-td[colspan = "6"] {
+            .fr-grid-8 .fr-grid-td[colspan = "6"],
+            .fr-grid-12 .fr-grid-td[colspan = "9"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(3/4);
                 }
@@ -481,7 +486,7 @@
             }
 
             // 1/6
-            .fr-grid-6 {
+            .fr-grid-6, .fr-grid-12 .fr-grid-td[colspan = "2"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(1/6);
                 }
@@ -490,14 +495,16 @@
             // 2/3
             .fr-grid-6 .fr-grid-td[colspan = "4"],
                 .fr-grid-3 .fr-grid-td[colspan = "2"],
-                .fr-grid-9 .fr-grid-td[colspan = "6"] {
+                .fr-grid-9 .fr-grid-td[colspan = "6"],
+                .fr-grid-12 .fr-grid-td[colspan = "8"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(2/3);
                 }
             }
 
             // 5/6
-            .fr-grid-6 .fr-grid-td[colspan = "5"] {
+            .fr-grid-6 .fr-grid-td[colspan = "5"],
+                .fr-grid-12 .fr-grid-td[colspan = "10"] {
                 .xforms-field, .xforms-textarea > pre {
                     .setWidth(5/6);
                 }
@@ -563,9 +570,29 @@
                 }
             }
 
-            //.fr-grid-12 .fr-grid-td[colspan = "3"] {
-            //    ???
-            //}
+            .fr-grid-12 {
+                .xforms-field, .xforms-textarea > pre {
+                    .setWidth(1/12);
+                }
+            }
+
+            .fr-grid-12 .fr-grid-td[colspan = "5"] {
+                .xforms-field, .xforms-textarea > pre {
+                    .setWidth(5/12);
+                }
+            }
+
+            .fr-grid-12 .fr-grid-td[colspan = "7"] {
+                .xforms-field, .xforms-textarea > pre {
+                    .setWidth(7/12);
+                }
+            }
+
+            .fr-grid-12 .fr-grid-td[colspan = "11"] {
+                .xforms-field, .xforms-textarea > pre {
+                    .setWidth(11/12);
+                }
+            }
 
             // Bootstrap adds `content: " (" attr(href) ")"` and `content: " (" attr(title) ")"`
             a[href]:after, abbr[title]:after {