Akash21 Akash21 - 3 months ago 5x
HTML Question

Why is my Jquery function not changing the height of my textarea?

Here are the stylesheet excerpts for the panel class which I am using to edit the text area and "textarea".


float: left;
width: 50%;


resize: none;
border-top: none;
border-color: grey;

Below is the stylesheet excerpt for "topbar", the header above the text area.


width: 100%;
background-color: #FFFFFF;
padding: 5px;
height: 20px;

Here is the div that contains my textarea (The bodyContainer id is not styled)

<div id="bodyContainer">

<textarea id="TextPanel" class="panel">Hello World</textarea>

<iframe id="outputPanel" class="panel"></iframe>

Below are the Jquery computations intended to edit the textarea's height.

$(".panel").height($(window).height() - $("#topbar").height() - 15) ;

$(".panel").width($(window).width()/2 -10 ;


You are setting the css incorrectly. And i would recommend you also use variables


var h= $(window).height() - $("#topbar").height() - 15;
var w = $(window).width()/2 -10 ;

$(".panel").css( "height", h );
$(".panel").css( "width", w );

Give that a whirl