SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Hybrid View

  1. #1
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question making text box == text area?

    Bros,

    How do you make text boxes and text areas render at same width in different browsers? Text boxes use width to define its width unlike text areas they use col's.. And the measurement of cols are different on different browsers. Thus you will get different weird shapes on different browsers. Any thoughts highly appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Just give them all a px width. E.g.

    Code:
    input[type="text"], textarea {width: 300px;}

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Just give them all a px width.
    you don't even need to use pixels for the width. Any unit will work to define them as being the same width as long as you specify it in the CSS.

    The values specified in the HTML only need to be there for the extremely rare person who has CSS disabled. Since inputs generally display reasonably for that situation you would generally only specify a size for textareas in the HTML itself as a default size to display in this rare situation.

    The other thing to note is that most browsers now allow textareas to be resized by the person filling out the form so just because you set it to the same width as the inputs doesn't mean it will stay that way if someone decides they want to make it wider.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    Any unit will work to define them as being the same width as long as you specify it in the CSS.
    I find that other units, like ems and %, get inconsistent results with inputs/textareas, so I tend to use px for these now. If you set both textarea and input to width: 60%, for example, one tends to appear wider than the other. Not sure why ... (that's with font sizes / fonts / padding etc all equalized, too ...)

  5. #5
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Just give them all a px width. E.g.

    Code:
    input[type="text"], textarea {width: 300px;}
    It worked, I just had to be more specific like #myform input[type="text"], textarea {width: 500px;} as it was targeting all my text boxes around the site . Thanks!

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    It worked, I just had to be more specific like #myform input[type="text"], textarea {width: 500px;} as it was targeting all my text boxes around the site . Thanks!
    Since all form fields need an id to attach the label to the field in a semantic way, why not just use a list of all the ids and not bother referencing whether they are input or textarea fields.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Since all form fields need an id to attach the label to the field in a semantic way, why not just use a list of all the ids and not bother referencing whether they are input or textarea fields.
    I'm not very clear here. Did u mean like this?
    #myform {width: 500px;}
    or
    #myform input {width: 500px;}

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    I'm not very clear here.
    Felgall is saying that each of your text inputs and textareas ideally should have a unique id, such as

    Code:
    <div>
    					<label for="email">Email Address</label>
    					<input name="email" type="email" id="email" value="">
    				</div>
    				
    				<div>
    					<label for="comm">Comments</label>
    					<textarea name="comments"  id="comm"></textarea>
    				</div>
    So then you would style those inputs with something like

    Code:
    #email, #comm {width: 500px;}
    It's not necessarily the most efficient option, though, especially if you have a lot of inputs/textareas.

    Note that your code should have been this:

    Code:
    #myform input[type="text"], #myform textarea {width: 500px;}
    rather than this:

    Code:
    #myform input[type="text"], textarea {width: 500px;}

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I think he means:
    Code:
    #myform, #yourform, #hisform, #herform {width:500px}
    could also be written:
    Code:
    #myform,
    #yourform,
    #hisform,
    #herform {
        width:500px;
    }


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
  •