Textbox not stretching to screen.

Discussion in 'Web Design and Development' started by PXL Creations, Nov 28, 2009.

Most Liked Posts
  1. PXL Creations, Nov 28, 2009

    PXL Creations macrumors member

    Joined:
    Nov 28, 2009
    #1
    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:

    HTML:
    <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.
     
    share
    + Quote Reply
  2. angelwatt, Nov 28, 2009

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
    share
    + Quote Reply
  3. PXL Creations, Nov 28, 2009

    PXL Creations thread starter macrumors member

    Joined:
    Nov 28, 2009
    #3
    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.
     
    share
    + Quote Reply
  4. nuxx, Nov 28, 2009

    nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #4
    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.
     
    share
    + Quote Reply
  5. PXL Creations, Nov 28, 2009

    PXL Creations thread starter macrumors member

    Joined:
    Nov 28, 2009
    #5
    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?
     
    share
    + Quote Reply
  6. nuxx, Nov 28, 2009

    nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #6
    I rarely use form elements, but when I do I'm not too concerned about their width.

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

     
    share
    + Quote Reply
  7. PXL Creations, Nov 28, 2009

    PXL Creations thread starter macrumors member

    Joined:
    Nov 28, 2009
    #7
    Hmm, that's good to know. I really don't know what to do or what to search google for, lol.
     
    share
    + Quote Reply
  8. astroot, Nov 28, 2009

    astroot macrumors regular

    Joined:
    Nov 12, 2009
    #8
    I think the best you can do is use the text-size-adjust:

    Code:
    input: {-webkit-text-size-adjust: 120%}
    You could also try auto instead of 120%, but never really played with it very much.
     
    share
    + Quote Reply
  9. PXL Creations, Nov 28, 2009

    PXL Creations thread starter macrumors member

    Joined:
    Nov 28, 2009
    #9
    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.
     
    share
    + Quote Reply
  10. Darth.Titan, Nov 28, 2009

    Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #10
    If width:100% is too much, try stepping down the percentage until you get what you want.
     
    share
    + Quote Reply
  11. PXL Creations, Nov 28, 2009

    PXL Creations thread starter macrumors member

    Joined:
    Nov 28, 2009
    #11
    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!
     
    share
    + Quote Reply
  12. SrWebDeveloper, Nov 28, 2009

    SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #12
    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
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page