Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 13:37:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Extra padding removed from textarea

Browse source
This commit is contained in:
Shaurya Sharma 2026-04-21 19:03:14 +05:30
parent 2e521f18cb
commit 4546faa890
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/AppBuilder/Widgets/TextArea.jsx
View file

@ -28,12 +28,21 @@ export const TextArea = (props) => {
return;
}
inputRef.current.style.height = 'auto';
// `scrollHeight` = content + padding. We add just the 2px top/bottom
// border so the outer box doesn't clip and trigger an unwanted scrollbar.
// Previously +20 was used here, which padded every grown textarea with
// an extra ~20px of empty space — visible as unexplained vertical slack.
// Subtract the input container's padding + border so the outer wrapper
// matches the authored widget height when content fits. Without this,
// wrapper = textarea + container padding/border, making dynamic-height
// textareas visibly taller than non-dynamic ones.
const container = inputRef.current.parentElement;
const cs = container ? window.getComputedStyle(container) : null;
const containerPaddingAndBorder = cs
? parseFloat(cs.paddingTop) +
parseFloat(cs.paddingBottom) +
parseFloat(cs.borderTopWidth) +
parseFloat(cs.borderBottomWidth)
: 0;
const effectiveMax = Math.max(height - containerPaddingAndBorder, 0);
inputRef.current.style.height =
height >= inputRef.current.scrollHeight ? `${height}px` : `${inputRef.current.scrollHeight + 2}px`;
effectiveMax >= inputRef.current.scrollHeight ? `${effectiveMax}px` : `${inputRef.current.scrollHeight}px`;
}, [inputRef?.current, height, isDynamicHeightEnabled]);
useLayoutEffect(() => {