0

I can't seem to figure out how to show/add scrollbar to a React Textarea. I have referenced this old post here Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink and few others but have not been successful.

I have tested it in both Chrome (Version 113.0.5672.129) and Edge (Version 114.0.1823.37)

Here is what I have:

const myComponet = () => {

 return (
    <input type= "textarea" className={styles.largeTextBox} id="someTextBox"/>
   )
}

//Stylesheet
.largeTextBox{
  width: 200px;
  height : 50px;
  overflow-x:hidden;
  overflow-y:scroll;
}

.frame::-webkit-scrollbar:vertical{
  width:11px;
}

.frame-webkit-scrollbar-track{
  background-color: #fff;
  border-radius: 8px;
}

Really appreciate some help here.

user1462617
  • 413
  • 1
  • 13
  • 23

1 Answers1

0

"textarea" is not a valid type for an <input>. You want a <textarea> element instead.

<textarea className={styles.largeTextBox} id="someTextBox" />
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
  • Jeez, had a feeling I was referencing (https://www.pluralsight.com/guides/how-to-use-multiline-text-area-in-reactjs) something wrong. Thank you @Unmitigated! – user1462617 Jun 05 '23 at 03:10