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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post

    Stretch textbox width to size of screen?

    Hello all, I am currently making a page for iPhones and I need a textbox to stretch across the screen with some padding on the other end. Here's my code:

    Code:
    <br><input type="checkbox" name="1" onChange = "enableDisableTextField(this)" class="check" /><input type="text" name="i[]" style="border:solid 1px #999999;width:100%;margin-right:10px;">
    I'm not sure what to do to make it stretch, and the 100% isn't working either. Thanks!

  • #2
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Question

    try

    Code:
    <br><input type="checkbox" name="1" onChange = "enableDisableTextField(this)" class="check" /><input type="text" name="i[]" style="display:block;border:solid 1px #999999;width:100%;margin:0px 10px;">

    Alternately you could try changing the text-align on the containing div/span whichever to center so that this all sits centered and then make the width 90%.

    I hope that helps!

    Kristin

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    Hmm, ok, that code didn't seem to do the trick (take a look at the screenshot below).

    The only problem with the center is that I would like it to be flushed left and then the box is just as big as the screen, and if the user entered in more information then it would go to the next line (although that can probably be addressed after the fact).
    Attached Thumbnails Attached Thumbnails Stretch textbox width to size of screen?-picture-1.png  
    Last edited by pxlcreations; 11-26-2009 at 12:59 AM.

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Hi, there is no screenshot?

    I am just wondering maybe if you changed it from input type="text" to input type="textarea" that you may have some more options as far as styling.

    Then you can change the number of rows & cols as well for default view and give a character limit. The text should automatically wrap inside of it.

    Let me know if that helps or see below:
    http://www.highdots.com/css-editor/h.../textarea.html

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    Ok, thanks! Btw, I did forget the screenshot but I just added it above.

  • #6
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    ok I see the screenshot now.

    I see the one box is all super long but am wondering why it isn't appearing like the others. I only have one line of code of yours.

    Did my previous reply help at all?

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    Well what I did was I only put the 100% on one of the lines instead of all of them. I'm wondering how this would work though, because I want it to continue on if it's too long (if the user inputs too much information, it will wrap to the next line).

  • #8
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    In that case. Really think textarea instead of text is the write way to go. You can use textarea and still have it appear as though it's just one line but the text will auto wrap with the right size and character limitations. You coul also have it appear as a two row box and the text will keep wrapping and u can turn scroll on or off.

  • #9
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    Ok, so what would the attributes be to make it one line with no scroll bar and have it adjust it's size according to page width? And thank you for all the help so far!

  • #10
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Hi,

    To make it only one line it would be:

    <textarea rows="1" cols="your choice" class="magicaltext">

    then the css would be like :

    .magicaltext{
    width:100%;}


  •  

    Posting Permissions

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