Adjust the size of the <textarea> to match the height of the table cell

Below is the code I am using to generate a table containing an image along with a <textarea>:

<table border="1" style="border-color: #a6a6a6" cellpadding="4" cellspacing="0" width="702">\
  <col width="455">
  <col width="230">\
  <tbody>
    <tr>\
      <td type="image" id="' + sdfsdsdf + '" data-parent-id="0" data-type="NORMAL" data-img="1" data-flags="1" data-type-ios="3" height="85" width="455"><img src="http://www.whichcitytotravel.com/wp-content/uploads/2016/01/Sunset-in-Monaco.jpg" style="width:100%;"></td>\
      <td width="230">
        <pre><textarea id="' + sdfsdfsdaf + '" data-parent-id="' + id_picture + '" data-type="sdfsdafsd" data-type-ios="4" rows="5" style="width:100%; height:100%; display:block;"></textarea></pre><br></td>\
    </tr>
  </tbody>
</table>'

The output will appear as shown in this link: https://jsfiddle.net/705buxgz/

I intend for the <textarea> to occupy all the available height within the cell of the table.

Despite trying various solutions provided here, none of them have proven effective for me.

javascripthtmlcsshtml-tabletextarea

Answer №1

Here is the solution you need: https://jsfiddle.net/eXamp1e/

Make sure to specify the height of both the table and pre. I've set it to 100% in this example. Remember, a child element can only be 100% of its parent's height if the parent's height has been defined as well.

Answer №2

It may not be a universal solution, but I stumbled upon this fix while exploring my CSS code. Inside my Site.css file, I came across the following snippet:

input,
select,
textarea {
    max-width: 280px;
}

By removing the styling for textarea, I was able to properly display content in that element. It turned out that the issue was specific to my CSS, so I revised the code to look like this:

input,
select {
    max-width: 280px;
}

And voila, problem solved!

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

Can we limit the text in a specific cell to one line on a desktop for a responsive table?

I am facing a challenge with making the second cell in my table have a width of 100% while ensuring that the text stays on one line. While the mobile version is functioning correctly, I am struggling to find a solution for the desktop version as the last ...

cssresponsive-designhtml-table

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

javascriptjqueryhtmlcss

Trouble with PHP and HTML Code not functioning properly after loop execution

I created a form with a dropdown menu that pulls options from a MYSQL Database. However, after fetching the options, the button and other components of the code seem to disappear. Everything else works fine when I comment out the PHP Query. <form acti ...

phphtmlmysqlformsbootstrap-4

The CSS code does not seem to be rendering properly within the plugin when attempting to generate a PDF file

I attempted to use a rendering plugin in order to create a PDF file. However, when I tried to add a CSS file for my template, it did not work as expected. I am a bit confused about how to properly import a CSS file into my GSP page. Here is the template c ...

htmlmavengrailsrenderinggsp

After removing an item from the component in reactJS, the immediate rendering of the dynamic component does not seem to be functioning correctly

I am currently creating a dynamic automobile inventory website from scratch using React.js, Express.js, and MongoDB. The data has been successfully loaded from the database and displayed in a tabular format on the client side. My next task is to enable use ...

javascriptreactjsmongodbexpress

iteration using underscores in JavaScript

I am currently working on creating an object using underscore and backbone. I have an array of objects, each containing a nested object with different sets of data. Within the array, data[0] holds the name of a location while data[2] contains the coordina ...

javascriptarraysgoogle-mapsunderscore.js

Creating a seamless navigation experience using Material UI's react Button and react-router-dom Link

Is there a way to have the Material UI react Button component behave like a Link component from react-router-dom while preserving its original style? Essentially, how can I change the route on click? import Button from '@material-ui/core/Button' ...

javascriptreactjsreact-routermaterial-uireact-router-dom

Why isn't it working if this.setState is not available?

Hey there, I'm having some trouble with my this.setState function in React. It works fine in other files but not here, even though the code is identical. Can anyone help me figure out why? test(event){ event.preventDefault(); var regex_mongoinclude = ...

javascriptreactjsthis

Oops! An issue occurred at ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 where a module cannot be located. The module in question is 'http'

I have been troubleshooting an issue with Next.js The error I am encountering => error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 Module not found: Can't resolve 'http' Import trace for req ...

javascriptnext.jssoliditypolygonmoralis

How should I proceed if a TypeScript definition file that I am relying on is lacking a specific definition?

I have encountered an issue while using the React type definitions for my project. The focus method is missing on elements in the array returned by the refs property, which prevents me from getting a specific example to work. The compiler error states: pro ...

javascripttypescript

What is the process for extracting specific text from a web page source using Python with Selenium?

The following is the HTML source code: <div class="dropdown-popup"> <a href="/integrations/sources/" class="dropdown-item">Sources</a> <a href="/integrations/destinations/" cla ...

htmlpython-3.xseleniumselenium-webdrivercss-selectors

Issue with Retrieving a particular table from SQL Server using mssql in javascript ('dbo.index')

I am currently experiencing an issue with trying to access a table named dbo.Index from SQL Server in my node js express application. Unfortunately, whenever I attempt to do so, the operation fails and returns no data. Below is the code snippet in questio ...

javascriptnode.jssql-serverexpressnode-mssql

Unable to transfer an array from getStaticProps method in Next.js

Whenever I pass a JSON array from getStaticProps in Next.js, I encounter this specific error message when trying to access it. TypeError: Cannot read property 'contentBody' of undefined module.exports../pages/[author]/[article].js.__webpack_expo ...

javascriptreactjsnext.js

Ways to refresh a container

How do I update the box below... <div className="container team-member-tasks"> <header className="header-box"> <h1>Team Member Tasks</h1> ...after marking a task as complete using the script below. ...

javascriptreactjsrefreshpage-refresh

Transform a dynamic web page into a static one using Next.js

Utilizing Next.js and React.js, I create dynamic web pages. Specifically, I generate user-related web pages that need to be updated when there are changes in the user data. How can I generate static HTML pages from this updated data within Next.js? Are the ...

javascriptreactjsnext.js

Can the selected week be highlighted along with the corresponding week number in a row?

Can we display the number of the week in a row along with the selected week, either in the toolbar or somewhere else? I attempted to utilize ToolbarComponent, but it overrides the entire header. However, I would like to keep it as is and just add informat ...

javascriptreactjsmaterial-ui

Angular: Observing changes in the store and sending a message from a Service component to another component once the Service has finished specific tasks

Within our codebase, we introduce two classes known as GetDataAsyncService. This service is designed to wait for a change in the store before executing the block of code contained within it. By utilizing observables and subscribing to data changes with t ...

javascriptangularrxjsngrx

How to correctly position a modal in a React application using CSS

Currently, I am working on integrating the react-modal NPM library into a React Typescript project. The issue I am facing is that the modal occupies the entire width of the screen by default, with padding included. My goal is to have it display as a small ...

cssreactjs

Ways to update the dataTable in ReactJS post clicking the save button on the modal

Just starting my second week of diving into React. Looking for some guidance on how to update the dataTable in reactJs after clicking the save button in the modal. This is the structure I'm working with: I have a ParameterMaintenance.jsx file that ...

javascriptreactjsbootstrap-5

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong. var data={ ...

javascriptjquerycssajax