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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    New Hampshire, USA
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Textarea defined by pixel (or em) value?

    Hi Folks,

    I have a <textarea> for an input field (naturally). My question: is there a way to determine rows/cols as pixel values?

    For example, I have this now:
    Code:
    <textarea placeholder="Enter your answer here (1,000 character limit)." id="fixed_size" cols="30" rows="5"></textarea>
    However, it was requested to be 398x460 pixels in dimension (Width x Height). I am using 16px Helvetica sans-serif if that helps. I am unaware of a way to make this happen exactly, but thought I would ask you fine folks if there is any new CSS3/HTML5 tricks (that don't use canvas...it conflicts with the rest of the app and out of scope for this question).

    Please let me know any ideas you may have, and as always thanks for the help.

    - lakeTrout

    PS: This is only my second post, but have found MANY helpful resources here and a tremendously fast reply to my first post...thanks!

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Unless I am misunderstanding your question, you will just need to do this:

    Code:
    <textarea placeholder="Enter your answer here (1,000 character limit)." id="fixed_size" style="width:398px;height:460px;"></textarea>
    Or, better still, in a remote CSS file do this:
    Code:
    #fixed_size{width:398px;height:460px;}
    That will get you the desired dimensions.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    laketrout (12-07-2011)

  • #3
    New Coder
    Join Date
    Dec 2011
    Location
    New Hampshire, USA
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Solved

    Thanks Rowsdower!

    I can't believe I missed that. I actually had a defined width in some of the demos that I was showing earlier in an external file...thanks for jogging my memory and setting me straight with the correct solution.

    -lakeTrout


  •  

    Tags for this Thread

    Posting Permissions

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