I have a form that requires a specific section to have a maximum height of 3 inches - due to physical printing purposes. In this section, I have a textarea for users to provide a response (with no maximum character limit). If the response is too long, it will push the next element/item in that div off the screen (i.e., overflow). When overflow occurs, I'd like either the entire FORM's (preferably) or the overflowing DIV's background to change color to visually indicate that overflow has occurred.

I can't post the actual code but here is a sample that details what I'm trying to accomplish. Looking to change color of either <form>, <section id="middle">, and/or <div id="overflow" class="static-section">.

div {
  border: 1px solid #CCC;
  background-color: #FFF;
  margin-bottom: 1rem;
  padding: 1rem;
  width: 8.5in;
  max-height: 7in;
}

.static-section {
  display: grid;
  overflow: hidden;
  max-height: 3in;
  width: 7.5in;

  * {
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding: .5rem;
  }
}

textarea {
  field-sizing: content;
}

<form id="entry">
  <section id="top">
    <h1>HEADER</h1>
  </section>

  <section id="middle">
    <div id="overflow" class="static-section">
      <label>This section is locked at a max 3 inches. I want the background color to be red if the anything makes this section overflow.</label>
      <textarea placeholder="type in this section until the following paragraph starts to go off the screen. this is when I want the background color to change."></textarea>
      <p>When this information starts to go off the screen (i.e., enabling overflow - which the scrollbars are being hidden by the static-section class), I want the background color of this div to change. This will provide a visual indication that the provided response is too long.</p>
    </div>
  </section>

  <section id="footer">
    <h1>FOOTER</h1>
  </section>
</form>

I have a form that requires a specific section to have a maximum height of 3 inches - due to physical printing purposes. In this section, I have a textarea for users to provide a response (with no maximum character limit). If the response is too long, it will push the next element/item in that div off the screen (i.e., overflow). When overflow occurs, I'd like either the entire FORM's (preferably) or the overflowing DIV's background to change color to visually indicate that overflow has occurred.

I can't post the actual code but here is a sample that details what I'm trying to accomplish. Looking to change color of either <form>, <section id="middle">, and/or <div id="overflow" class="static-section">.

div {
  border: 1px solid #CCC;
  background-color: #FFF;
  margin-bottom: 1rem;
  padding: 1rem;
  width: 8.5in;
  max-height: 7in;
}

.static-section {
  display: grid;
  overflow: hidden;
  max-height: 3in;
  width: 7.5in;

  * {
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding: .5rem;
  }
}

textarea {
  field-sizing: content;
}

<form id="entry">
  <section id="top">
    <h1>HEADER</h1>
  </section>

  <section id="middle">
    <div id="overflow" class="static-section">
      <label>This section is locked at a max 3 inches. I want the background color to be red if the anything makes this section overflow.</label>
      <textarea placeholder="type in this section until the following paragraph starts to go off the screen. this is when I want the background color to change."></textarea>
      <p>When this information starts to go off the screen (i.e., enabling overflow - which the scrollbars are being hidden by the static-section class), I want the background color of this div to change. This will provide a visual indication that the provided response is too long.</p>
    </div>
  </section>

  <section id="footer">
    <h1>FOOTER</h1>
  </section>
</form>

Any assistance with this is greatly appreciated.

• javascript
• html
• css

• An alternative approach if there's no solution: add a fat, bright red scrollbar and fix the height of the fixed panel (show the scrollbar) - quick fiddle to demonstrate jsfiddle/g6byf37c It might be possible to get this to overlay but there's indication that this is now deprecated – fdomn-m Commented Mar 13 at 18:27
• If you are using 3 inches on a screen as some kind of limit it would be pointless. The total amount of characters the user enters will vary according to screen width. You should determine how many characters are allowed and count those instead. – zer00ne Commented Mar 13 at 21:06
• @zer00ne - I'm using 3 inches due to it being the limited height for the physical printing of this page. Additionally, I do not think your statement is accurate regarding screen size - and according to what I've read (and experienced) 1 inch equates to 96 pixels (px) (and in this case 3 inches = 288 px) and is rendered as such on screen. – dDubs Commented Mar 14 at 14:01
• Sure based on 96 DPI – zer00ne Commented Mar 14 at 17:46

2 Answers 2

You can use JavaScript to detect when the content overflows and change the background colour of the <div> or the <form> accordingly. You can achieve this by doing:

<form id="entry">
  <section id="top">
    <h1>HEADER</h1>
  </section>

  <section id="middle">
    <div id="overflow" class="static-section">
      <label>This section is locked at a max 3 inches. I want the background color to be red if anything makes this section overflow.</label>
      <textarea placeholder="Type in this section until the following paragraph starts to go off the screen. This is when I want the background color to change." oninput="checkOverflow()"></textarea>
      <p>When this information starts to go off the screen (i.e., enabling overflow - which the scrollbars are being hidden by the static-section class), I want the background color of this div to change. This will provide a visual indication that the provided response is too long.</p>
    </div>
  </section>

  <section id="footer">
    <h1>FOOTER</h1>
  </section>
</form>

<script>
function checkOverflow() {
  const section = document.getElementById("overflow");

  if (section.scrollHeight > section.clientHeight) {
    section.style.backgroundColor = "red"; // Change background color when overflow occurs
  } else {
    section.style.backgroundColor = "white"; // Reset background color if no overflow
  }
}

document.addEventListener("input", checkOverflow);
</script>

The scrollHeight property tells the total height of the content inside the div, while clientHeight is the visible height. If the scrollHeight is greater than `clientHeight``, it means the content is overflowing.

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
}