`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like some sort of truncation is happening where 8 is sliced off from 178px—need assistance with this aspect. I have attempted using element.style.height, element.offsetHeight, element.clientHeight, and element.getBoundingClientRect().height, but all produce the same result. There are many posts on Stack Overflow discussing similar issues; most developers face problems with setting the height while the width works flawlessly for them. What could be causing this discrepancy? Thank you.

<p id="demo"></p>
<button onclick="chan()">change</button>

<script type="text/javascript">
    function chan() {
        var w=document.getElementById('num').getBoundingClientRect().width;
        var h=document.getElementById('num').getBoundingClientRect().height;
        document.getElementById("demo").innerHTML=w+" "+h;
        document.getElementById('cache').style.width=w+"px";
        document.getElementById('cache').style.height=h+"px";
    }
</script>
javascripthtmlcss

Answer №1

Adjust the table style from display: inline; to display: table; in order to achieve the perfect height.

table {
  display: table;
  width: 178px;
  height: 178px;
}

display: inline : Changes element to behave like an inline element

display:table : Enables the element to act as a table element

ul {
  list-style-type: none;
}

li {
  display: inline;
  /*not working for list2_tab_ta*/
}

input {
  border: 1px solid black;
  width: 30px;
  height: 30px;
  padding: 5px;
  background-color: grey;
}

#clr {
  margin-left: 190px;
  margin-bottom: 13px;
  padding: 5px;
}

table {
  display: table;
  width: 178px;
  height: 178px;
}

td {
  border: 1px solid black;
  background-color: powderblue;
  width: 30px;
  height: 30px;
  padding: 5px;
}

textarea {
  display: inline;
  /*readonly: true;*/
}
<ul>
  <li>
    <input type="number" id="operator1">
  </li>
  <li>
    <input type="text" id="operand1">
  </li>
  <li>
    <input type="number" id="operator2">
  </li>
  <li>=</li>
  <li>
    <input type="number" id="result">
  </li>
</ul>
<button id="clr">Clear</button>

<ul>
  <li>
    <table id="num">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>*</td>
      </tr>
      <tr>
        <td>0</td>
        <td>/</td>
      </tr>

    </table>
  </li>
  <li>
    <textarea id="cache"></textarea>
  </li>
</ul>

<p id="demo"></p>
<button onclick="chan()">change</button>
<script type="text/javascript">
    function chan() {
        var w=document.getElementById('num').getBoundingClientRect().width;
        var h=document.getElementById('num').getBoundingClientRect().height;
        document.getElementById("demo").innerHTML=w+" "+h;
        document.getElementById('cache').style.width=w+"px";
        document.getElementById('cache').style.height=h+"px";
    }
</script>

Implement these changes and see if they help!

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

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx

Guide to building a straightforward line graph using JSON data from a server

When I retrieve price change data from an API endpoint using axios, the response I receive is in the following format: 0: (2) [1639382650242, 48759.49757943229] 1: (2) [1639386250855, 49131.24712464529] 2: (2) [1639389730718, 48952.65930253478] 3: (2) [163 ...

javascriptreactjschartsnext.js

Is there a similar effect in jQuery? This is achieved using prototype

Simply click on the comments link. Observe how the comments smoothly appear, as if sliding down. Also, try clicking on 'hide' and see what happens. ...

javascriptjqueryajaxprototypejs

Having trouble importing from the public folder in CSS with Create React App?

While working on a project initialized with Create React App, in the public folder there is an assets directory containing a file named logo512.jpg. When I use this file in a component like so: <div> <img src='/assets/logo512.jpg'/& ...

javascriptcssreactjscreate-react-app

`The server fails to retrieve parameters passed through an angularJS HTTP GET request,

In my controller.js file, I've come across the following block of code: $http({ method: 'GET', url: '/getGuestList', params: {exhibitorID: 1} }) The purpose of this code is to fetch all the guests belonging to a parti ...

javascriptnode.jsangularjshttp

Tips for updating the value of an input text field in one HTML table according to a certain value entered in a different input text field located in another HTML table

I am working with an HTML table that consists of one row. Within this row, there are two TDs which each hold their own tables (each containing 10 rows with 10 input fields). My goal is to update the value of another corresponding text field based on change ...

javascripthtmljsp

Trouble with Google Web Fonts appearing incorrectly on Chrome for Windows 7

Currently facing an issue with a website I am developing using Wordpress: In Chrome, running on Windows 7, the body text on the homepage is supposed to be displayed as a Google Font. However, for some reason, the last line of the text is appearing in the d ...

csswordpressgoogle-chromewindows-7google-font-api

Utilizing Vue to link data to an input field

I am struggling with a loop of input elements <li v-for="role in ..."> {{-some html-}} </li> Each input is nested inside the loop as shown below <input type="text" :data-some="role.name" :value="role.name" name="name" ....> While ...

javascriptvue.js

What is the process for altering the active status in pagination?

How can I make the active class in my pagination appear in red? Here's the code snippet I have: In my script.js file: $(".pagination").append("<li class='page-item' id='previous-page'><a class='page-li ...

javascriptjquerycsspaginationanchor

Use jQuery.ajax() to submit data in separate rows of a table

At the moment, I have no issues submitting my form as long as it contains only one row in the table. However, when I add a second row, an error occurs and the submission fails. My goal is to be able to post the data from each table row separately with just ...

jqueryhtmlajax

Discover the best practices for integrating media queries using Radium within Material UI components

Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...

cssreactjsmaterial-uiradium

What is the best way to retrieve the value of this event in a React component?

Is there a way to retrieve the value of an input field? Typically, I would use event.target.value to do so. However, in this case, that method is not viable because the path of event.target leads me to an li element instead: This issue arises with a compo ...

javascriptreactjsmaterial-uidom-events

Alter the Default Visibility on an HTML Page from Visible to Hidden with JavaScript

I found this code snippet on a website and made some modifications. On my webpage, I have implemented links that toggle the visibility of hidden text. The functionality is working fine, but the issue is that the hidden text is initially visible when the p ...

javascriptjqueryhtmlarrays

"Enhance Your Webpage with Textual Links that Display Background

A div with a background image is causing issues when links are placed on top of it. The links do not display the underline when hovering over them, unlike other links on the page. Below is the code snippet causing the problem: <div style="min-height:2 ...

htmlcsshyperlinkhover

What is the best method for managing an event loop during nested or recursive calculations?

When it comes to breaking a computation and releasing using setTimeout(), most examples seen involve having a shallow call stack. But what about scenarios where the computation is deeply nested or mutually-recursive, like in a tree search, with plenty of c ...

javascripttypescriptgeneratoryield

Retrieve binary data of an image from an API and render it on an HTML page

I have been working on storing images in a MongoDB database and trying to display the response I receive from an Express API as an image on the client side. The image source URL looks like this: src="/image/data/5a44dde172aa021d107e7d33" When I try to wr ...

javascriptnode.jsexpressmongoose

Enhance the jQueryUI progress bar by dynamically updating it with inner HTML data

I am working on implementing a jQueryUI progress bar and facing some challenges. Here is the basic code for the progress bar: <script> $(function() { $("#progressbar").progressbar({ value: 50, }); }); </script& ...

javascriptjqueryajax

Guide on displaying JSON information upon clicking using JavaScript

I'm having difficulty writing the logic for this code. I have extracted data from a vast API. The current code fetches all program titles (some may be repeated) and compares them with an array of late night shows, then displays them once in their own ...

javascripthtmlarraysjsonget

Utilize the DataTables plugin to arrange a column based on icons with hidden boolean values in rows

I am currently utilizing the DataTables plugin to enhance my HTML table. While I have managed to successfully implement most functionalities, I am facing a challenge with the boolean column. This particular column consists of icons representing X (value 0) ...

javascripthtmljquerydatatables

Prevent reloading the page when adding a flash element using JavaScript (jQuery)

Here is the function I am working with: function onVideo(vchat, idUser){ $('#videollamada').html('<div class="videollamada">'+ '<div align="right">'+ ...

javascriptjqueryflash