Scrollbar not appearing when overflow-y is set in React Textarea Input on Chrome or Edge

I've been struggling to add a scrollbar to a React Textarea. I've referred to an old post on Stack Overflow here and a few other resources, but haven't had any luck.

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

Here's the code 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;
}

I would really appreciate some assistance on this.

Answer №1

"textarea" is incorrect as a type for an <input>. It should be used within a <textarea> element.

<textarea className={styles.largeTextBox} id="someTextBox" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in TypeScript: Typography type does not accept 'string' type as valid

As I attempt to implement the Typography component from material-ui using TypeScript, I encounter a perplexing error message TypeScript is throwing an error: Type 'string' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLE ...

Apply only the css style to the first adjacent div with a specific class name

Is it possible to apply a specific style to only the first div with the class "bla" and not the second? <div class="outer"> <div> ....(more div's, unknown how many) <div class="bla"> .... <div class="b ...

The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...

Creating a page turn effect during the loading of a page within an iframe

Is there a way to create a page turn effect similar to reading a book for an iframe that is loading dynamic content? Any suggestions would be greatly appreciated. Link: ...

Activate the angular function

In the controller below, there is a function that should be triggered when the link is clicked: <a id="1" href="" name="xxx" ng-click="searchall(id)">sample link</a> ng.controller('SearchResultController', ['$scope', &apos ...

Arranging adjacent div blocks to maintain alignment in a stylish way

I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...

The function Getter is expected, but an error has occurred with "getters.doubleCounter" returning a value of 20 in VUEX

Currently, I am diving into the world of Vuex and encountering some challenges along the way. In my attempt to create a getter on my vuex instance, I am facing an error when trying to display data from one of my components: The getter should be a functi ...

What is the best way to alternate between two CSS stylesheets when using jQuery-UI?

Just getting started with jQuery and javascript and decided to test out 2 different jQuery-ui stylesheets in a simple .html file. The goal is to have the example dialog open with the "flick" stylesheet and the datepicker within the dialog open with the "u ...

Automatically collapse the responsive menu upon selecting a menu item

I have implemented a custom JavaScript code for a basic open/close menu movement on multi-page websites. The code works by closing the menu only when the user clicks the menu symbol. However, I now need to incorporate this code into a one-page website and ...

Having trouble accessing a PDF file using gview

Having trouble opening a document I am unable to preview the documents and I'm not sure what I'm missing. I have read through various StackOverflow questions and answers related to this issue, but still no luck. url = http://192.168.0.6:8077/ ...

What's the rationale behind receiving the second before the first?

I've been digging into ES6 promises, and I thought I had a handle on it for a moment. However, it seems like I may have hit a roadblock. What I'm aiming to do is handle a series of file operations where each operation depends on the completion o ...

How can I create a customized scrollbar for a div element in an Angular 2.0 CLI project?

I am attempting to create a sleek horizontal scroll bar within one of my div elements, similar to the example shown here: https://i.stack.imgur.com/ziWhi.png My project is based on the angular2 CLI. Progress so far: I came across this package angular2-s ...

Determine the frequency of a specific letter in JavaScript by utilizing the indexOf method

Hey there! I'm currently working on a code to count the occurrences of a specific letter in a string using indexOf(). However, it seems like something may be off with my implementation. Can anyone point me in the right direction? Thanks! var string = ...

Issues with fetching data from a Drupal module using an Ajax call

I have created a custom module in Drupal where the .js file is supposed to make an ajax call to a .module file. However, I am facing issues as the ajax call is not functioning properly. Can someone please assist me with this? Below is my .js file: // Jqu ...

Fluctuating and locked header problem occurring in material table (using react window + react window infinite loader)

After implementing an Infinite scrolling table using react-window and material UI, I have encountered some issues that need to be addressed: The header does not stick to the top despite having the appropriate styles applied (stickyHeader prop). The header ...

Is it achievable to assign a various value to the data attribute of a transition object in Ember.js?

Is there a way to set the data object when transitioning from a route using the transitionTo method? Upon entering the target route, I noticed that the transition object in my model hook has an empty attribute data: {}. What is the purpose of this object ...

Exploring the getServerSideProps function in Next.js with a loop

I'm currently diving into the world of Next.js and facing an issue while trying to retrieve data from the database and display it on the index page. The problem arises when I execute the getServerSideProps function, as it seems to enter into a loop an ...

Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...

Having trouble sharing content from my React next.js website on social media due to issues with open graph meta tags

I'm currently facing an issue with my Next.js application when trying to share content on Facebook and Twitter. I've made sure to include the necessary open graph meta tags in the document's head section and I'm using React Helmet to dy ...

Executing jQuery code after a data update in Angular can be achieved by utilizing

Currently, I am working with Angular 1.4.7 on a site that was not set up by me. As a result, I am uncertain about the specific information needed in this scenario. We are displaying search filters, but their enabling or disabling is controlled by data fetc ...