Stretch textbox width to size of screen?

[pxlcreations]

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]

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]

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]

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

[pxlcreations]

Ok, thanks! Btw, I did forget the screenshot but I just added it above.

[kristingish]

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]

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]

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]

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]

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%;}