79515276

Date: 2025-03-17 17:10:03
Score: 2.5
Natty:
Report link

Thanks @Hilory - this post really helped me. There was another post that came in but for some reason appears to have been deleted that also helped (sorry I didn't catch the name to give credit). Since I decide that I'd rather have the entire form's background color changed and also needed to monitor any changes that may affect the overflowing, I updated Hilory's and the other poster's together to come up with the following:

<script>
    const overflowContainer = document.getElementById('overflow');
    const entryForm = document.getElementById('entry');

    function checkOverflow() {
        const isOverflowing = overflowContainer.scrollHeight > overflowContainer.clientHeight;
        entryForm.classList.toggle('overflowing', isOverflowing);
    }

    // Initial check
    checkOverflow();

    // Add event listeners for dynamic content changes
    entryForm.addEventListener('input', checkOverflow);
    window.addEventListener('resize', checkOverflow); //checks when text-area is resized.
    window.addEventListener('change', checkOverflow); //need this bc of the font-resizing functionality on the page.
</script>

Note that using the above also requires the following CSS class:

.overflowing {
    background-color: #F77 !important; // Redish background for overflow
}
Reasons:
  • Blacklisted phrase (0.5): Thanks
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Hilory
  • Self-answer (0.5):
  • Looks like a comment (1):
  • Low reputation (1):
Posted by: dDubs