Akash21 Akash21 - 4 months ago 9
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".

.panel{

float: left;
width: 50%;
}

textarea{

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


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

#topbar{

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>
</div>


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 ;

Answer

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

like

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

Comments