SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  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)

    textArea its height is dynamic

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>dynamic textArea</title>
    <body style="padding:10px">
    
    textArea1
    <textArea id="textArea1" style="width:100%;height:30px">
    Tom live in New York. He is an American.
    Chu live in Seoul. He is a Korean.
    Paul live in Paris. He is a French.
    </textArea>
    
    textArea2
    <textArea id="textArea2" style="width:100%;height:100px">
    Tom live in New York. He is an American.
    Chu live in Seoul. He is a Korean.
    Paul live in Paris. He is a French.
    </textArea>
    
    textArea3
    <textArea id="textArea3" style="width:100%;height:45px">
    Tom live in New York. He is an American.
    Chu live in Seoul. He is a Korean.
    Paul live in Paris. He is a French.
    </textArea>
    
    textArea4
    <textArea id="textArea4" style="width:100%;height:45px">
    Tom live in New York. He is an American.
    Chu live in Seoul. He is a Korean.
    Paul live in Paris. He is a French.
    Danaki live in Tokyo. He is a Japanese.
    </textArea>
    
    textArea5
    <textArea id="textArea4" style="width:100%;height:58px">
    Tom live in New York. He is an American.
    Chu live in Seoul. He is a Korean.
    Paul live in Paris. He is a French.
    Danaki live in Tokyo. He is a Japanese.
    </textArea>
    
    trial textArea
    <textArea id="trial textArea4" style="width:100%;height:100%">
    Tom live in New York. He is an American.
    Chu live in Seoul. He is a Korean.
    Paul live in Paris. He is a French.
    Danaki live in Tokyo. He is a Japanese.
    </textArea>
    </body>
    <html>
    I have the code above at the page of http://dot.kr/x-test/dynamicTextArea.php.

    In textArea1, the height 30px is so small to contain 3 lines which is in textArea1.
    so the last line is below the box of the textArea1.

    In order to contains all 3 lines in the textArea,
    I change the height from "30px" to "100px". so the textArea contains all 3 lines in textArea2.
    However it has empty space in the buttom of the box.

    Although I set proper px as 45 px, so I can make it not too tall and not too small in textArea4 when it has 3 lines of text,
    what if the text has 4 lines?
    I should make the height 58px in textArea5 for make it contains all lines and has no empty space in the bottom of the box instead of set 45 px.


    The following is one of the tials for it, but it seems not to work
    Code:
    [b]trial textArea[b]
    <textArea id="trial textArea4" style="width:100%;height:100%">
    Tom live in New York. He is an American.
    Chu live in Seoul. He is a Korean.
    Paul live in Paris. He is a French.
    Danaki live in Tokyo. He is a Japanese.
    </textArea>
    Can I do it in CSS with your help? or should I go javascript forum of some other place for it?

    How I can make the box always contains all text lines AND no empty space in the bottom of the box with your help?

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

    Louis has an interesting technique here for resizing textareas.

    http://www.impressivewebs.com/textarea-auto-resize/

    There is also a shorter method mentioned in the comments:

    http://jsbin.com/idemad/2/edit

    And there is an old article on Sitepoint:

    http://www.sitepoint.com/build-auto-...ng-textarea-1/

    You can't do it with CSS alone I'm afraid.


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
  •