...

View Full Version : [htm] please help: textarea expand when type in



Replika
12-24-2005, 05:54 AM
My file: post.htm:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<style>
body {margin: 0; padding: 0}

.eps table, .eps div, .eps form, .eps p, .eps h1, .eps h2, .eps h3,
.eps h4, .eps pre, .eps blockquote, .eps ul, .eps ol, .eps li, .eps dl,
.eps dt, .eps dd, .eps th, .eps td, .eps fieldset, .eps img, {
margin: 0px; padding: 0px; font-weight: normal; list-style: none}

.eps input, .eps select, .eps textarea, .eps optgroup {margin: 0; padding: 0}

* html .eps, * html .inbox, * html .inform {height: 1px}

.eps, .eps table, .eps input, .eps select, .eps textarea {font: 11px Verdana,Tahoma}


#eps_wrap {
background: #ffffff;
color: #303030;
margin: 10px;
padding: 10px;
}
#page_header, #page_footer {clear: both}
#page_header {height: 100px}
#page_footer {padding: 20px}
#main_left {clear: left; float: left; width: 170px}

#main_right {clear: right; float: right; width: 150px;}
#main_content {margin: 0 160px 10px 180px}


#page_header, #main_left, #main_right, .eps fieldset, .eps .inform {
margin-bottom: 10px;
}
#main_left .box, #main_right .box {
margin-bottom: 20px;
}

.eps .infieldset, .eps .inbox, .eps .box_header {padding: 5px}

.eps table {width: 100%}

DIV.txtinput {WIDTH: 90%}
DIV.txtinput TEXTAREA, INPUT.longinput {WIDTH: 100%}

.inform p {margin: 0.5em}
.inform p input {margin: 0 5px}
.eps label {display: block; margin: 5px}

#eps_wrap, #page_footer, #page_header, .eps .box,
.eps fieldset, .eps input, .eps select, .eps textarea, .eps checkbox {
border: 1px solid #000000
}

.eps input, .eps select, .eps textarea {padding: 2px 0}

</style>
<div id="eps_wrap" class="eps">
<div id="page_header">Header</div>

<div id="main_left">
<div id="l_menu">
<ul>
<li><a href=#>Item1</a></li>
<li><a href=#>Item1</a></li>
<li><a href=#>Item1</a></li>
<li><a href=#>Item1</a></li>
</ul>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
</div>

<div id="main_right">
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
</div>

<div id="main_content">
<div class="box">
<div class="inbox">
<div class="title">Dang tin tuc</div>
<div class="post">
<form id="postnews" method="post" action="">
<div class="inform">
<fieldset>
<legend>asdfasdf</legend>
<div class="infieldset txtinput">
<label><strong>Subject</strong><br /><input class="longinput" type="text" name="req_subject" value="" size="50" maxlength="70" tabindex="1" /><br /></label>
<label><strong>Content</strong><br />
<textarea name="req_message" rows="20" cols="95" tabindex="2"></textarea></label>
</div>
</fieldset>
<fieldset>
<legend>Tuy chon</legend>
<div class="infieldset txtinput">
<label><strong>Loai tin</strong><br /><input name="n_type" type="radio" value="1" checked />Tin chinh&nbsp;<input name="n_type" type="radio" value="2" />Tin van</label>
<label><strong>image</strong><br /><input class="txtin" type="text" name="req_subject" value="" size="50" maxlength="70" tabindex="3" /><br /></label>
</div>
</fieldset>
<p><input type="submit" name="submit" value="Submit" tabindex="5"></p>
</div>
</form>
</div>
</div>
</div>
</div>

<div id="page_footer">sdfgdfg</div>

</div>
</body>
</html>

The textarea auto expand when I type in. Anyone help me?

_Aerospace_Eng_
12-24-2005, 06:42 AM
The question would be why.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {margin: 0; padding: 0}
#req_message {
overflow:hidden;
}
.eps table, .eps div, .eps form, .eps p, .eps h1, .eps h2, .eps h3,
.eps h4, .eps pre, .eps blockquote, .eps ul, .eps ol, .eps li, .eps dl,
.eps dt, .eps dd, .eps th, .eps td, .eps fieldset, .eps img {
margin: 0px; padding: 0px; font-weight: normal; list-style: none}

.eps input, .eps select, .eps textarea, .eps optgroup {margin: 0; padding: 0}

* html .eps, * html .inbox, * html .inform {height: 1px}

.eps, .eps table, .eps input, .eps select, .eps textarea {font: 11px Verdana,Tahoma}


#eps_wrap {
background: #ffffff;
color: #303030;
margin: 10px;
padding: 10px;
}
#page_header, #page_footer {clear: both}
#page_header {height: 100px}
#page_footer {padding: 20px}
#main_left {clear: left; float: left; width: 170px}

#main_right {clear: right; float: right; width: 150px;}
#main_content {margin: 0 160px 10px 180px}


#page_header, #main_left, #main_right, .eps fieldset, .eps .inform {
margin-bottom: 10px;
}
#main_left .box, #main_right .box {
margin-bottom: 20px;
}

.eps .infieldset, .eps .inbox, .eps .box_header {padding: 5px}

.eps table {width: 100%}

DIV.txtinput {WIDTH: 90%;margin:auto;}
INPUT.longinput {WIDTH: 100%}

.inform p {margin: 0.5em}
.inform p input {margin: 0 5px}
.eps label {display: block; margin: 5px}

#eps_wrap, #page_footer, #page_header, .eps .box,
.eps fieldset, .eps input, .eps select, .eps textarea, .eps checkbox {
border: 1px solid #000000
}

.eps input, .eps select, .eps textarea {padding: 2px 0}

</style>
<script type="text/javascript">
function sizeBox(){
if(document.getElementById('req_message').offsetWidth <= (document.getElementById('infieldset').offsetWidth-10)){
document.getElementById('req_message').cols=document.getElementById('req_message').value.length+2;
}
else if(document.getElementById('req_message').offsetWidth > (document.getElementById('infieldset').offsetWidth-10)){
document.getElementById('req_message').style.width="100%"
document.getElementById('req_message').style.overflow="auto";
}
}
</script>
</head>

<body>
<div id="eps_wrap" class="eps">
<div id="page_header">Header</div>

<div id="main_left">
<div id="l_menu">
<ul>
<li><a href=#>Item1</a></li>
<li><a href=#>Item1</a></li>
<li><a href=#>Item1</a></li>
<li><a href=#>Item1</a></li>
</ul>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="l_login" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
</div>

<div id="main_right">
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
<div id="r_recenttopic" class="box">
<div class="box_header">asasf</div>
<div class="inbox">adfas</div>
</div>
</div>

<div id="main_content">
<div class="box">
<div class="inbox">
<div class="title">Dang tin tuc</div>
<div class="post">
<form id="postnews" method="post" action="">
<div class="inform">
<fieldset>
<legend>asdfasdf</legend>
<div id="infieldset" class="infieldset txtinput">
<label><strong>Subject</strong><br /><input class="longinput" type="text" name="req_subject" value="" size="50" maxlength="70" tabindex="1" /><br /></label>
<label><strong>Content</strong><br />
<textarea name="req_message" id="req_message" onkeyup="sizeBox()" rows="20" cols="1" tabindex="2"></textarea></label>
</div>
</fieldset>
<fieldset>
<legend>Tuy chon</legend>
<div class="infieldset txtinput">
<label><strong>Loai tin</strong><br /><input name="n_type" type="radio" value="1" checked />Tin chinh&nbsp;<input name="n_type" type="radio" value="2" />Tin van</label>
<label><strong>image</strong><br /><input class="txtin" type="text" name="req_subject" value="" size="50" maxlength="70" tabindex="3" /><br /></label>
</div>
</fieldset>
<p><input type="submit" name="submit" value="Submit" tabindex="5"></p>
</div>
</form>
</div>
</div>
</div>
</div>

<div id="page_footer">sdfgdfg</div>

</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum