SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Any way to make form fields expand to available width?

    I'm tweaking the layout on some forms for a project at work and I need to get some of the form fields (input, select and textarea) to expand to fill in the available space if the user has a higher screen resolution. We need to support IE and Firefox and screen resolutions from 800x600 to 1024x768. The forms are laid out within tables. When the resolution increases the tables expand to fill the width of the screen, and the table cells resize accordingly. But I haven't been able to find a way to get the form fields to resize to fill in the available space.

    Is there a way to do this with CSS?

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    ATLANTA GA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have css width:nn% on fields before (actually textarea) but it may work for your situation.

    Try this...

    <td><input style="width:100%"></td>

  3. #3
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,417
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Works for me as well and seems fine in the major browsers.

  4. #4
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both of you. I'll give it a go. I know that there was a style applied to the field which had width: 98% and that was causing the textarea to collapse down to nothing but the scrollbars. The code I'm working on is generated by a program so it's a bit of work trolling through it. I'll have a much closer look now.

    Thanks!

  5. #5
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason this just isn't working in the code I'm tweaking. IE especially seems to have a problem with it. The code is so messy though there could be something else influencing it which I'm not picking up. But it's good to know for future reference... when I write my own nice tidy code

  6. #6
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would border-collapse: collapse on the main table cause problems/conflicts with the width:100%?

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using % it's only going to expand to 100% of the table cell so you may need to set % widths on your table cells as well.

  8. #8
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,417
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It's also worth setting a height on <textarea>'s as well to be safe!


Bookmarks

Posting Permissions

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