Textbox not stretching to screen.

[PXL Creations]

Hello all, I have an important question about my web app I'm making. It's going to be a checklist app and I will have textbox's for the fields. Anyways, I need the textbox's to stretch across the screen so that when the iPhone is turned in different directions, it will stretch to fit the screen with a 12px margin on the right. Here's my current code:

<input type="checkbox" onChange = "enableDisableTextField(this)" class="check" /><input type="text" name="i[]" style="font-family:Marker Felt;width:auto;height:20px;font-size:14px;border:1px solid #999999;background-color:white;padding:1px;color:#333333;margin-right:12px;"/>

Thank you in advance.

 

[angelwatt]

Your web page doesn't know what orientation you're holding the iPhone. The iPhone can zoom in and out, the page doesn't really change its layout.

 

[PXL Creations]

I'm not exactly sure what you mean by that, I want the textbox to stretch in width to the screen size when the iPhone is turned so basically it has to be the width of the page.

 

[nuxx]

Normally you would set the width attribute of an element to 100%, not auto, so that it expands to fit the width of the parent element. But as far as I know, the width of a text box is measured in characters, not pixels, and is set using the size attribute.

So, I could be wrong, but I'm not sure that what you're trying to do is possible.

 

[PXL Creations]

Normally you would set the width attribute of an element to 100%, not auto, so that it expands to fit the width of the parent element. But as far as I know, the width of a text box is measured in characters, not pixels, and is set using the size attribute.

So, I could be wrong, but I'm not sure that what you're trying to do is possible.

Ok, I see what you mean. I also tried that and the box stretched farther than the page and went to the next line. Could I then sent the amount of characters to auto so it would stretch to the size of the page?

 

[nuxx]

I rarely use form elements, but when I do I'm not too concerned about their width.

Could I then sent the amount of characters to auto

I guess you could try, but this is from w3.org regarding the size attribute:

This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.

 

[PXL Creations]

Hmm, that's good to know. I really don't know what to do or what to search google for, lol.

 

[astroot]

I think the best you can do is use the text-size-adjust:

input: {-webkit-text-size-adjust: 120%}

You could also try auto instead of 120%, but never really played with it very much.

 

[PXL Creations]

Ok, I put that in my CSS and still nothing. But I still don't know if the text is determining the size... It could but I haven't heard of that happening (except in the last thing you posted). It seems like it would be so simple, like how a div can stretch to the width of the screen... but maybe it isn't that simple.

 

[Darth.Titan]

If width:100% is too much, try stepping down the percentage until you get what you want.

 

[PXL Creations]

Geez, I feel like an idiot now. That worked fine (well it's good enough, lol) since I took it down to 82%. The margin is still different when you turn the iPhone but like I said, it's good enough. Thank you too all that helped!

 

[SrWebDeveloper]

I've coded web sites for the iPhone.

I opted to use a special template designed for the iPhone, which is really nothing more than a unique stylesheet combined with HTML and Javascript to build the menu system.

http://www.knoxing.com/2007/08/20/create-iphone-apps-with-knox-iphone-template/

But the key thing is the CSS template defines the height and width boundries in static pixels in an overall wrapper, then you can just set CSS widths to 100% for the elements you want to span the entire width of the template so long as you don't float. This might sound similar to the previoujs advice given, but remember this is a special template for iPhone only - so you can design it differently than the regular web site. Plus this template has pre-built navigation buttons and content areas if you want to use them.

If you want your site to work on both an iPhone and regular web browser at the same time, but not have to code separate sites just check the user-agent string (i.e. Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) and dynamically load the proper style sheet/template server side.

-jim