Fix the width of inline edit field

diff --git a/adminer/static/default.css b/adminer/static/default.css
index 8f751ac6e47a8831fb701cbf081a1d03e46829f2..81ca0bde3c315bda3c4a9da8fc8ae1e88420f912 100644 (file)
--- a/adminer/static/default.css
+++ b/adminer/static/default.css
@@ -24,6 +24,7 @@ tbody tr:hover td, tbody tr:hover th { background: #eee; }
 pre { margin: 1em 0 0; }
 pre, textarea { font: 100%/1.25 monospace; }
 pre.jush { background: #fff; }
+input, textarea { box-sizing: border-box; }
 input, select { vertical-align: middle; }
 input.default { box-shadow: 1px 1px 1px #777; }
 input.required { box-shadow: 1px 1px 1px red; }

diff --git a/adminer/static/functions.js b/adminer/static/functions.js
index d885bd229cbf51774548ca075810a36e94acb819..14252b65b96067ebaae007a34a1746c0e1e25345 100644 (file)
--- a/adminer/static/functions.js
+++ b/adminer/static/functions.js
@@ -708,9 +708,13 @@ function selectClick(event, text, warning) {
                        td.innerHTML = original;
                }
        };
-       var pos = event.rangeOffset;
-       var value = (td.firstChild && td.firstChild.alt) || td.textContent || td.innerText;
-       input.style.width = Math.max(td.clientWidth - 14, 20) + 'px'; // 14 = 2 * (td.border + td.padding + input.border)
+
+       let pos = event.rangeOffset;
+       let value = (td.firstChild && td.firstChild.alt) || td.textContent || td.innerText;
+       const tdStyle = window.getComputedStyle(td, null);
+
+       input.style.width = Math.max(td.clientWidth - parseFloat(tdStyle.paddingLeft) - parseFloat(tdStyle.paddingRight), 20) + 'px';
+
        if (text) {
                var rows = 1;
                value.replace(/\n/g, function () {