Javascript - ReactJS: Textbox Creating Extra Scroll at Bottom of Page

Javascript – ReactJS: Textbox Creating Extra Scroll at Bottom of Page

Last updated: 2023/12/10 at 1:17 PM

Admin

1 Min Read

Problem:

I have a React app where I use a textarea to allow users to input text. I want the textarea to fill the height of the screen, but not make the page scrollable unless there’s more text than can fit on the screen.

Contents

Problem:Solution:

Here is my CSS code (the textarea is entry-input):

* {
  margin: auto;
  font-family: 'Nunito', sans-serif !important;
  color: #222222;
  background-color: #FAF3E0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800 !important;
  color: #111111;
}

.journal-page {
  padding: 4rem 22%;
}

.date-title {
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

.entry-input {
  font-size: 1.125rem;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  height: calc(100vh - 5rem);
  background-color: white;
}

Removed padding and margins.
Used height: auto in CSS.
Tried JavaScript to dynamically adjust the height based on the content.
Used overflow: hidden and overflow-y: auto.
Inspected and nothing unusual too.