Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [htm] please help: textarea expand when type in

    My file: post.htm:

    Code:
    <!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?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The question would be why.
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •