...

View Full Version : Stretch textbox width to size of screen?



pxlcreations
11-25-2009, 06:07 PM
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:


<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!

kristingish
11-25-2009, 10:08 PM
try


<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

pxlcreations
11-25-2009, 11:02 PM
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).

kristingish
11-25-2009, 11:27 PM
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/html_tutorial/forms/textarea.html

pxlcreations
11-26-2009, 02:00 AM
Ok, thanks! Btw, I did forget the screenshot but I just added it above.

kristingish
11-26-2009, 02:23 AM
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?

pxlcreations
11-26-2009, 01:26 PM
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).

kristingish
11-26-2009, 07:34 PM
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.

pxlcreations
11-28-2009, 05:07 PM
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!

kristingish
11-30-2009, 02:28 AM
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%;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum