SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Handling Larger Text Inputs

    I need some help handling the sizing of Text Inputs on my "Add an Article" form.

    All of my fields are at least 100 characters in length.

    If I even make them 70em, they fill up most of the screen width on my form/laptop.

    How should I handle these?

    1.) Make them skinnier, but let people still enter 100 characters in a 60em wide Input field?

    2.) Somehow make the Input field 2 Rows high? (Almost like a mini Text Area?!)

    3.) Other?

    ----

    Also, hat is the best way to handle fields that are "MediumText" in MySQL (i.e. BIG fields that could hold a book!!)??

    Any "best practices" for using Text Areas?

    Thanks,



    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    All of my fields are at least 100 characters in length.

    If I even make them 70em, they fill up most of the screen width on my form/laptop.
    characters and ems are not the same thing. 70em is very wide. Just set the inputs to a width that suits your design, and if there are more characters that can fit visually, the user can just scroll a bit.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    2.) Somehow make the Input field 2 Rows high? (Almost like a mini Text Area?!)
    text inputs are one-liners, so that's out. You can't use/set rows, and it sounds like you really do want text inputs here instead of actual textareas.

    I make sure my inputs have some padding inside, and you can type 100 characters into your inputs in a few browsers and get a feel for how wide you want to set your inputs, if you really want all 100 characters to show onscreen without the default scrolling (browsers let the text inside a text input scroll as the user types... nothing wrong with this). Though if this is wider than your page or box width then I'd let the input just not get any wider than that.
    Last edited by ralph.m; Aug 20, 2011 at 17:34.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    text inputs are one-liners, so that's out. You can't use/set rows, and it sounds like you really do want text inputs here instead of actual textareas.
    You are correct, except that to fit 100 characters into an Input field, it is a good portion of my laptop screen and makes the form look *weird*.

    (see attached screen-shot)


    I make sure my inputs have some padding inside, and you can type 100 characters into your inputs in a few browsers and get a feel for how wide you want to set your inputs, if you really want all 100 characters to show onscreen without the default scrolling (browsers let the text inside a text input scroll as the user types... nothing wrong with this). Though if this is wider than your page or box width then I'd let the input just not get any wider than that.
    After I have some actual data, maybe I'll find I don't need 100 characters, but for now I'm being safe, and that is pretty darn wide.



    Debbie


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
  •