TextArea size
Results 1 to 7 of 7

Thread: TextArea size

  1. #1
    Senior Member
    Join Date
    Sep 2012
    Posts
    269

    TextArea size

    Is there a way to size a text area relative to the window width? Rows and columns only work well with a fixed screen-width.

  2. #2
    Pna lbh ernq guvf¿
    Join Date
    Jul 2004
    Location
    Kansas City area
    Posts
    19,349
    You can use CSS to set the "width" property equal to a percentage of the container of the textarea. Otherwise, you'd probably have to use Javascript to determine the "window width" (and then similarly set the 'width' attribute equal to whatever ratio of that value you desire).

  3. #3
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,619
    Quote Originally Posted by bradgrafelman View Post
    You can use CSS to set the "width"
    I'd like to rephrase that as you should use CSS to set the width property. But wether it's actually possible to set the textrarea width relative to the window depends entirely on the width of the containing elements. That is, unless you use javascript to compute the window width and then resize the textarea. But then you had better go on and resize all of its parent elements up the chain, which means you might just as well have set them to relative sizes to begin with.
    Last edited by johanafm; 11-26-2012 at 09:47 AM.

  4. #4
    Senior Member
    Join Date
    Oct 2005
    Location
    Chicago, IL
    Posts
    417
    Another CSS based option is to use the media attribute and do something like:

    HTML Code:
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css">
    <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css">
    <link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">

    Then set a different size in the #id of the input box in each CSS file that has a media attribute. That way you will have responsive design elements based on the viewport. I have not tested this in IE.
    Last edited by jeepin81; 11-26-2012 at 02:53 PM.
    Bob Lob Law

  5. #5
    Senior Member
    Join Date
    Aug 2008
    Location
    London, UK
    Posts
    753
    CSS media queries do not work in IE (not sure about IE10, but virtually nobody has that anyway).
    Ashley Sheridan
    www.ashleysheridan.co.uk

  6. #6
    Senior Member
    Join Date
    Mar 2009
    Location
    Canada
    Posts
    794
    One thing to note about setting the dimensions of a textarea via CSS: for the HTML to validate properly I believe the attributes rows and cols still need to be present and have a value.

    Quote Originally Posted by Ashley Sheridan View Post
    CSS media queries do not work in IE (not sure about IE10, but virtually nobody has that anyway).
    I believe support was added in IE9.

    Also I'm pretty sure IE supports the @media rule within style sheets.
    Prison of Mirrors
    Declare variables, not war.

  7. #7
    Senior Member
    Join Date
    Aug 2008
    Location
    London, UK
    Posts
    753
    Quote Originally Posted by Bonesnap View Post
    One thing to note about setting the dimensions of a textarea via CSS: for the HTML to validate properly I believe the attributes rows and cols still need to be present and have a value.
    They are required in HTML4, but they are optional in HTML5, defaulting to 20×2 if unspecified.


    Quote Originally Posted by Bonesnap View Post
    I believe support was added in IE9.
    I stand corrected, I hadn't realised IE9 had implemented this.
    Ashley Sheridan
    www.ashleysheridan.co.uk

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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