From 68578aa929e6256e5cbdaba95dcd398b4c72e17d Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Fri, 19 Jan 2024 04:35:44 -0800 Subject: [PATCH] Fix the two-line case for show more/less I made two mistakes here! One is that you need to round up subpixel line heights, and the other is that `clientHeight` is what I want, I shouldn't include the margin! --- app/javascript/item-page.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/item-page.js b/app/javascript/item-page.js index 6cf63a88..c66f53fb 100644 --- a/app/javascript/item-page.js +++ b/app/javascript/item-page.js @@ -19,9 +19,9 @@ try { const tradeSections = document.querySelectorAll("#trade-hangers p"); for (const section of tradeSections) { const oneLine = parseFloat(getComputedStyle(section)['line-height']); - const maxHeight = oneLine * 2; + const maxHeight = Math.ceil(oneLine * 2); - if (section.offsetHeight > maxHeight) { + if (section.clientHeight > maxHeight) { section.style.maxHeight = `${maxHeight}px`; section.setAttribute("data-overflows", ""); }