SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    setting the width according to maxlength attribute

    hey folks,
    i have a form and i have set wid maxlength of input type to different size like 20 or 30. but now i wanna set the width of that td with css. according to maxlength 20. so it doesn't wrap. how can i manage that?
    All those who wander aren't lost.

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by emaarkhan View Post
    but now i wanna set the width of that td with css. according to maxlength 20. so it doesn't wrap. how can i manage that?
    it's probably straight forward, but what td are you referring to ??

    post some code.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    image this field
    Code HTML4Strict:
    <table>
    	<tr>
        	<td><input type="text" maxlength="20" /></td>
       </tr>
    </table>
    now this is front end. now from database imagine the length is set to 20 too meaning it won't insert any word more than 20 characters long. now i wanna pull that in that td. so i want to set the td width that can only show 20 characters long sentence and no wrap
    All those who wander aren't lost.

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <input type="text" name="myInp" size="20" maxlength="20" />
    sets the size and maxlength to 20 in the <input> which I think is what you are after.

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You'd probably put a fixed width on the TD than would accommodate at least 20 em albeit since you've set a maximum of 20 on the input anyway. You already know you'll get a maximum output of 20 so the TD must be equal or greater to 20 characters taking one character at approximately 1 em.

    Assuming you didn't mean the INPUT box itself like Kalon mentioned, which 'size' sets the suggested number of characters for text - which is a 'good bet' on what you were actually after.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    so i want to set the td width that can only show 20 characters long sentence and no wrap
    Sounds like you need to set the width of the td to match the width of the input. Set the input width in pixels (or ems) rather than the size attribute so you know exactly how wide it will be. Then set the td to be the same size as that width but that means the table will need to be in table-layout:fixed mode to apply widths consistently.

    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 type="text/css">
    table {
        table-layout:fixed;
    }
    td {
        width:146px;
        border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td><input type="text"  /></td>
        </tr>
        <tr>
            <td><p>text that will wrap at the same width as the input length</p></td>
        </tr>
    </table>
    </body>
    </html>
    Or perhaps you mean something like this:
    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 type="text/css">
    td {
        width:1px;
        border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td><div>
                    <input type="text" size="20"  />
                </div>
                <p>text that will wrap at the same width as the input length</p></td>
        </tr>
    </table>
    </body>
    </html>


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
  •