SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    extending textarea

    Code:
    <input name="title" size="91"><br> 
    
    <textarea name="say"
            	    cols="70"
                    rows="10"></textarea><br>
    			  
    <input type="submit" value="Submit New Thread">
    I have two entering boxes which is sized by "91" and "70" in the code above.

    The size of the entering box is fixed by number.

    I am wondering whether I can have flexible boxes which is extendible from left end to right end.

    The following code is a would be one.
    Although the following code doesn't work correctly, it will be help you to understand what I am trying to do.
    Code:
    <input name="title" size="100%"><br> 
    
    <textarea name="say"
            	    cols="!00%"
                    rows="10"></textarea><br>
    			  
    <input type="submit" value="Submit New Thread">
    You can see the two boxes at http://220.89.242.19:8500/test/06/home/write.cfm

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if I'm understanding what you want but can't you just specify a percentage width.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {width:50%;border:1px solid #000;}
    textarea {width:100%}
    </style>
    </head>
    <body>
    <div id="outer">
    <form name="form1" id="form1" method="post" action="">
    <label for="textarea">Test</label>
    <textarea name="textarea" id="textarea"></textarea>
    </form>
    </div>
    </body>
    </html>
    Or are you after something else?

    Paul
    Edit:


    I don't think mozilla will like the above code much though.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B

    textarea {width:100%}
    As I added the code above inside <style>,
    the textarea at http://220.89.242.19:8500/test/07/home/write.cfm is extended as I wish.

    but the bottom scroll bar which I didn't expect is created.
    I think the following code causes that.

    Code:
    * html #centerContent {height:1%;margin-bottom:12px; padding:5px}

    There are two solutions for that.;
    (1) changing " textarea { width:100% } " into " textarea { width:90% } "
    (2) removing "padding : 5px"

    Can I remove the bottom scroll bar without changing the width of textarea and removing the padding margin ?
    (I am thinking about 100% width textarea which is also reponding to padding.)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Just changing textarea to about 99% should do the trick.

    If you don't want padding on the text area then take the padding out of centercontent and nest another element after the textarea with the padding back in.

    Paul

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If you don't want padding on the text area then take the padding out of centercontent and nest another element after the textarea with the padding back in.

    Paul
    I know how a table is nested in another table.
    But I don't know how a divsion is nested in another division.

    How can I take the padding out of ccenterContent and nest another element after the textarea with the padding?

    The following is one of my trials for it, but it seems not to work.
    http://220.89.242.19:8500/test/08/home/write.cfm .

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Code:
    * html #centerContent {height:1%;margin-bottom:12px; }/* combat IE's 3 pixel jog */
    #innercentre {padding:5px;}
    textarea { width:99% }
    Code:
      <div id="centerContent"> 
    	<script language = "JavaScript" type = "text/javascript">
    	 function validate(f) {
    	  if (f['form1'].value.length == 0) {
    	  alert("Title, please");
    	  return false;
    	  }
    	  if (f['say'].value.length == 0) {
    	  alert("Message, please");
    	  return false;
    	  }
    	  return true;
    	  }
     </script>
    	<form action="action.cfm" method="post" onSubmit="return validate(this);">
    	  <label for=form1>title</label>
    	  <br>
    	  <input name="form1">
    	  <br>
    	  <label for="textarea">Message</label>
    	  <textarea name="say"			
    				rows="10"></textarea>
    	  <br>
    	  <input type="submit" value="Submit New Thread">
    	</form>
    	
     <div id="innercentre">
     <p>This is centerContent area.</p>
     </div>
      </div>
       <div id="clearfoot"></div>

    Something like that anyway

    Paul


Bookmarks

Posting Permissions

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