From bba4588bfda008ddd7580a3f319872fb8d7a15e9 Mon Sep 17 00:00:00 2001
From: Paul Warren <pdw@ex-parrot.com>
Date: Sun, 10 Mar 2024 17:18:22 +0000
Subject: [PATCH 1/2] Avoid interfering with layout of tables with absolutely
 positioned content.

---
 .../viewer/src/js/tableExport.js              | 25 +++++++++++++++----
 samples/src/testdoc/testdoc.ixtmpl            |  7 +++++-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/iXBRLViewerPlugin/viewer/src/js/tableExport.js b/iXBRLViewerPlugin/viewer/src/js/tableExport.js
index d8486ea63..fd4459d50 100644
--- a/iXBRLViewerPlugin/viewer/src/js/tableExport.js
+++ b/iXBRLViewerPlugin/viewer/src/js/tableExport.js
@@ -16,11 +16,26 @@ export class TableExport {
         $('table', iframe).each(function () {
             const table = $(this);
             if (table.find(".ixbrl-element").length > 0) {
-                table.css("position", "relative");
-                const exporter = new TableExport(table, reportSet);
-                $('<div class="ixbrl-table-handle"><span>Export table</span></div>')
-                    .appendTo(table)
-                    .click(() => exporter.exportTable());
+                const containsAbsolute = Array.from(this.querySelectorAll("*"))
+                    .reduce(
+                        (res, elt) => (res || getComputedStyle(elt).getPropertyValue('position') === 'absolute'),
+                        false
+                    );
+
+                // Don't add handles if the table contains absolutely
+                // positioned elements, as doing so will probably interfere
+                // with layout.
+                //
+                // Where a table has absolutely positioned content, it's quite
+                // likely that the table tag itself is positioned in a random
+                // place.
+                if (!containsAbsolute) {
+                    table.css("position", "relative");
+                    const exporter = new TableExport(table, reportSet);
+                    $('<div class="ixbrl-table-handle"><span>Export table</span></div>')
+                        .appendTo(table)
+                        .click(() => exporter.exportTable());
+                }
             }
         });
     }
diff --git a/samples/src/testdoc/testdoc.ixtmpl b/samples/src/testdoc/testdoc.ixtmpl
index be2814ff7..9374d7f08 100644
--- a/samples/src/testdoc/testdoc.ixtmpl
+++ b/samples/src/testdoc/testdoc.ixtmpl
@@ -164,13 +164,18 @@ Profit Loss double tagged: {{ monetary eg:ProfitLoss[] }}{{ monetary eg:ProfitLo
         {{ period cur3mo "2018-09-01" "2018-12-31" }}
         {{ period prev3mo "2017-09-01" "2017-12-31" }}
 
+        <p>
+            This table contains some absolutely position content, so should not
+            have a table export handle.
+        </p>
+
         <table class="accounts">
             {{ column-aspects static [period=cur] [period=prev] [period=cur3mo] [period=prev3mo] }}
             {{ column-styles "" "figure" "figure" "figure" "figure" }}
             <thead>
                 <tr>
                     <th></th>
-                    <th>2018</th>
+                    <th style="position: relative"><div style="position: absolute">2018</div></th>
                     <th>2017</th>
                     <th>3 months to <br></br>31 Dec 2018</th>
                     <th>3 months to <br></br>31 Dec 2017</th>

From 032d8bf94125a73ff8c10990cb3063b205be19f2 Mon Sep 17 00:00:00 2001
From: Paul Warren <pdw@ex-parrot.com>
Date: Sun, 10 Mar 2024 19:27:11 +0000
Subject: [PATCH 2/2] Replace reduce() with some()

---
 iXBRLViewerPlugin/viewer/src/js/tableExport.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/iXBRLViewerPlugin/viewer/src/js/tableExport.js b/iXBRLViewerPlugin/viewer/src/js/tableExport.js
index fd4459d50..43bfbdd55 100644
--- a/iXBRLViewerPlugin/viewer/src/js/tableExport.js
+++ b/iXBRLViewerPlugin/viewer/src/js/tableExport.js
@@ -17,10 +17,7 @@ export class TableExport {
             const table = $(this);
             if (table.find(".ixbrl-element").length > 0) {
                 const containsAbsolute = Array.from(this.querySelectorAll("*"))
-                    .reduce(
-                        (res, elt) => (res || getComputedStyle(elt).getPropertyValue('position') === 'absolute'),
-                        false
-                    );
+                    .some((elt) => getComputedStyle(elt).getPropertyValue('position') === 'absolute');
 
                 // Don't add handles if the table contains absolutely
                 // positioned elements, as doing so will probably interfere