Adjusting the height of a textarea in React mui to match its parent element height

Utilizing the react mui library version 3.9.3 for UI components in my current project, I am facing an issue with a textarea field:

<div className={classes.fieldWrappper}>
    <TextField
      id="filled-multiline-static"
      label="Oppgavetekst"
      multiline
      value={tekst}
      onChange={onTekstChange}
      InputProps={{classes: {root: classes.textArea}}}
      InputLabelProps={{
        shrink: true,
      }}/>
  </div>

The styling for fieldWrapper and textArea has been defined as follows:

fieldWrappper: {
    position: 'relative',
    display: 'grid',
  },
  textArea: {
    height: '100%',
    background: 'white',
  },

However, the textarea does not occupy the complete height of the fieldWrapper. This can be observed here:

https://i.sstatic.net/n1Qxc.png

It seems that MuiInputBase is inheriting the full height from the parent element.

https://i.sstatic.net/8Kftc.png

In the developer console, upon inspection, it appears that changing the MuiPrivateTextarea-root to have a height of 100% resolves the issue. However, I am unsure of how or where to implement this change within the codebase?

javascripthtmlcssreactjsmaterial-ui

Answer №1

Apologies for the delayed response, but here is a helpful tip for those seeking to create a full height text area with Material design.

To achieve this, simply place your TextField within a flex container and adjust the root element using FlexGrow. Then, utilize InputProps to ensure the input element takes up the complete height. Remember to set alignItems: 'start' to align your text at the top of the input field.

<TextField
    multiline
    sx={{display: 'flex', flexGrow: 1}}
    InputProps={{
      sx: {
        height: '100%',
        alignItems: 'start'
      }
    }}
  />

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

Consistent HTML spacing problem across all web browsers

After creating this sample gallery, I noticed some unwanted vertical spacing between the images that I am looking to eliminate. Despite my efforts, I couldn't find a way to do so: ...

javascriptjqueryhtmlcss

"An unidentified entity in the form of a string prior to submitting the

When I send data to a NodeJS server using a POST request, the following code snippet processes the incoming data: if(req.method === "POST") { let body; req.on("data", (chunk) => { body += chunk.toString(); }); req.on("end", () ...

javascriptnode.js

Placing a three-dimensional object in the corners of the canvas using three.js

I'm trying to position a 3D object in either corner of my canvas automatically, regardless of its size. https://i.sstatic.net/IWgr1.png After finding a solution on stackoverflow: I implemented the following code for my object: mesh.position.set(-( ...

javascriptcanvasthree.js

Why is jQuery button function only functioning for the first button?

I'm encountering an issue with my table of records. Each row in the table has a submit button that triggers an AJAX request to the server when clicked. Strangely, the first button works perfectly and sends the request as expected. However, subsequent ...

javascripthtmljquery

Discover how to utilize Firebug in Java to access a node's CSS properties

Is there a way to access all properties (CSS, etc) of web page nodes using Firebug within Java code without relying on XPath? I would like to retrieve all available properties instead of checking for them individually. Any advice on how to achieve this? ...

cssseleniumwebdriverselenium-webdriverfirebug

Learn the process of transferring data from a page to a layout in NUXT

I am in the process of creating a basic website. The goal is to dynamically change the Navbar elements based on the data set in the navLayout within the page template. My plan is to pass this data to the layout and then utilize props to transmit it to the ...

javascriptvue.jsnuxt.js

Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...

javascripthtmlcssasciinema

Do not include the "dist" folder when exporting sub-modules in TypeScript

I've developed a basic module called modA: modA/ - package.json - dist/ - index.js - db.js - stuff.js My goal is to use the submodules "db" and "stuff" like this: import * as db from modA/db -- how can I achieve this? My package.json has main: ...

javascripttypescript

Using the scroll feature within the tooltip component in React with @material-ui/core/Tooltip can cause the entire page to

I am currently working with a tooltip created using the @material-ui/core/Tooltip library, and it is functioning correctly. You can see an example of the tooltip in action at this link: https://codesandbox.io/s/kgccc. https://i.stack.imgur.com/fMgGb.png ...

cssreactjsscrollmaterial-uitooltip

Discovering routes in Angular2

I'm attempting to replicate something similar to this example here: AngularJS show div based on url/condition <span id="page-locator" *ngIf="location.path() == '/overview'">test</span> Unfortunately, it's not working as ex ...

javascripthtmlangulartypescript

"Looking for a way to automatically close the <li> tag in Vuejs when clicked outside

clickOutside: 0, methods: { outside: function(e) { this.clickOutside += 1 // eslint-disable-next-line console.log('clicked outside!') }, directives: { 'click-outside': { ...

javascriptvue.js

A guide on retrieving an object and showcasing it in HTML using JavaScript

Can someone share a method to iterate through an object array in JavaScript? I have an array called sample where the property options needs to be displayed using lit-HTML for each object. var sample = [{ "trans": [{ "id": "trans", "fee": 20, ...

javascripthtmlarraysobjectlit-element

What is the best way to make a bootstrap component (container) stretch to the full width and height of the window when it first loads, and which

I am looking to achieve something similar to the design on a certain website: The goal is to have a container with a background and a form inside that resizes proportionally based on the size of the window it is opened in. The resizing should be smooth an ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to showcase images and text from an array of objects using React

I'm currently working on a React lightbox that is supposed to display a loop of objects containing images and text. However, I'm facing an issue where the images are not showing up with the corresponding text label as intended. It seems like I a ...

javascriptreactjs

The compilation process for npm start has encountered an error

Having trouble with npm start and running react-scripts start. Can anyone offer assistance? I'm attempting to integrate Swiper in my app, but encountering this error in the console. UPDATE: I've included the code snippet where Swiper is utilize ...

reactjsnpmpackage.jsonnpm-start

Navigate to specific sections

I'm currently developing a website and working on creating a menu that allows users to smoothly scroll to anchors within the same page as well as anchors on different pages. Successfully implemented the scrolling functionality for same-page anchors u ...

javascriptjqueryhtmlanchor

What is the best way to retrieve a single value in a React JS application?

api image Trying to store only the ChannelName value using a method, but facing an issue where every 4 values are being stored instead. I need to store only one value at a time. Index for (var x in setdata) { index.push(x); } Index = setdata[inde ...

reactjs

expanding the close window icon beyond the boundaries of the modal container

I seem to be experiencing a CSS mistake that I can't figure out. The close window icon in my modal window is getting cut off at the edge and not displaying properly. Check out this JSFiddle link <div id="sendMsgForm" class="modal"> <div ...

htmlcss

Encountering the error message "TypeError: Unable to access properties of null (reading 'get')" while utilizing useSearchParams within a Storybook file

Looking at the Next.js code in my component, I have the following: import { useSearchParams } from 'next/navigation'; const searchParams = useSearchParams(); const currentPage = parseInt(searchParams.get('page') || '', 10) || ...

reactjstypescriptnext.jsstorybook

Show singular array element upon click

I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...

javascriptjqueryhtmlcssarrays