`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

Unlock the full potential of custom authorization providers when integrating them with Supabse

Supabase user here looking to implement authorization with a third-party service that isn't on the supported list. Any suggestions on how to go about this? ...

javascriptsupabasesupabase-database

Having trouble with Vue router functionality

I've attempted troubleshooting my router countless times, but it still won't work properly. I'm unable to navigate or switch to different pages in my Vue project. Despite following all the steps outlined in this link , nothing seems to chang ...

htmlvue.jsvue-router

Vue-Router 4 now automatically redirects the default URL to a "404 Page Not Found

I recently decided to upgrade my Vue application from version 2 to version 3, following the official Vue migration documentation. One of the changes I made was updating the vue-router package. However, after updating my router.js file, I noticed that when ...

javascriptvue.jsvuejs2vue-router

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

I am currently developing a citizenNumber component for use in forms. This component implements ControlValueAccessor to work with ngModel. export class CitizenNumberComponent implements ControlValueAccessor { private _value: string; @Input() place ...

javascriptangularhtmltypescript

Angular custom filter applied only when a button is clicked

I have recently started exploring angular custom filters and I am curious to know if there is a way to trigger the filters in an ng-repeat only upon clicking a button. Check out this example on jsfiddle : http://jsfiddle.net/toddmotto/53Xuk/ <div ...

javascriptjqueryangularjs

Implement Material UI Card Component in your React Project

I'm currently working on a project that includes a page with expandable cards arranged in a list format. The code I have right now is not very scalable, as I keep adding individual card tags for each item. What I would like to achieve is to load data ...

javascriptreactjsmaterial-ui

Having Trouble with Gulp and AutoPrefixer Integration

I have integrated Gulp into my project and am looking to utilize the autoprefixer feature. Here is a glimpse of my current gulp file: // Including gulp var gulp = require('gulp'); // Including necessary plugins var concat = require('gulp-c ...

cssnpmsassgulp

Encountering an error message when trying to launch an application: Module

Every time I try to launch my react-native app in git-bash, I encounter the following error message. I have already uninstalled and reinstalled node.js, cleared the cache, and attempted various solutions from Stack Overflow and GitHub with no success. ...

javascriptnode.jsreact-nativenpmexpo

Ensuring the node array is easily accessible within the view

I am currently working on building a simple messaging system using express/nodejs. Although I have successfully implemented the feature to send messages to all users, I now want to enable users to have private 1-to-1 conversations. My aim is straightforwa ...

javascriptnode.jssessionexpress

Our search box is showing suggested results but we are unable to access the specific product sku. What steps can we take to resolve this issue?

/* This is a global settings template for CSS. The code includes various styling rules for elements such as article, nav, form, header, and footer among others. There seems to be an issue with the CSS that may be affecting the functionality of a drop-down ...

csstemplatessearch-engine

Calculation for determining the fill of a DIV's remaining height

Here is what I have: <div id="modal-container"> <div id="modal-body"></div> <div id="modal-footer"></div> </div> I am currently working on a JavaScript function to adjust the height of #modal-body to fill in the re ...

javascriptjquerycss

Vue.js encountered an uncaught TypeError while trying to execute the 'drawImage' function

I am facing an issue with my vue.js application where I can successfully apply a filter to a photo, but I am unable to post it. The error message I am encountering is: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingCon ...

javascriptimagevue.jscanvasbase64

Exploring the Functionality of HTML Anchor Link Fragment within Angular 6

I've been working on an Angular 6 project where I've disabled the hash-location-strategy, removing # from the URL. As a result of this change, a link like: <li routerLinkActive="active"> <a [routerLink]="['/settin ...

htmlangularroutesanchorhash-location-strategy

Customize the appearance of a shadow-root element

Is there a way to modify the styles of a shadow element? Specifically, is it possible to extend or overwrite certain properties within a CSS class? I am currently using a Chrome extension called Beanote, which has not been updated since April 2017. There i ...

javascriptcssweb-componentshadow-dom

What could be the reason for jQuery not functioning properly as needed?

function toggleDisplayingRooms(nameSelect){ if(nameSelect){ firstroom = document.getElementById("firstroom").value; secondroom = document.getElementById("secondroom").value; thirdroom = ...

javascriptjquery-uibootstrap-4dom-events

Can $location be modified without triggering its corresponding $route?

Can you update the location path in Angular.js without activating the connected route? For example, is there a way to achieve this (see pseudo code below): $location.path("/booking/1234/", {silent: true}) ...

javascriptangularjs

Maintaining an onExit function in the ui-router framework

I am trying to implement an animation on an element within a page when the user is transitioning out of a state. Here is my current code snippet: { ....., views: { ... }, onExit: function(){ someEle.classList.remove("someClass"); // ...

javascriptcssangularjsangular-ui-router

Take away the Link Navigation feature for dates on the calendar

I need to eliminate the link associated with the date shown in a SharePoint calendar list. Despite using developer's tools, I cannot locate an anchor tag to disable using CSS. My goal is to accomplish this task solely through CSS. Here is the code sn ...

htmlcss

I encountered a response error code 500 from the development server while using my emulator

As I embark on setting up the react-native environment for development, I encounter an error when executing the command react-native run-android. root@pc:~/l3/s2/DevMobMultipltm/Wakapp# ` A series of tasks are carried out including scanning folders for sy ...

javascriptreactjsreact-nativeandroid-emulatorandroid-gradle-plugin

Header navigation issue: sub menu fails to display

I've been trying to troubleshoot this issue, but nothing seems to quite fit my situation. My header contains an empty space (referred to as "void" in my case) and a menu directly beneath it. When scrolling down, the header moves up and the menu rema ...

jqueryhtmlcssdrop-down-menusticky