Form issues

[steeleprice]

I am having lots of difficulty creating grid based forms that have multiple text inputs on the same line. for example:

<div id="address">
    <div class="cell">
        <input type="text" id="street" placeholder="Street" class="col" {{value street}} />
    </div>
    <div class="col cell">
        <input type="text" id="locality" placeholder="City" class="mobile-size1of2 size1of2" {{value locality}} />
        <input type="text" id="region" placeholder="State" class="mobile-size1of4 size1of4" {{value region}} />
        <input type="text" id="postalCode" placeholder="Postal Code" class="mobile-sizefill sizefill" {{value postalCode}} />
    </div>
</div>

(This is a mustache template, but it does the same thing when hard coded)

what I want is: [street] [city][state][postal]

but what I get is: [street] [city][state] [postal]

Even if I change sizefill to size1of4 it ALWAYS wraps the last column. I have tested this in Chrome, Firefox and IE, they all do the same thing.

Is there a recommendation for doing this with being forced into using a table? On a Mobile device with a narrow screen, I expect it to wrap, but not on a desktop or tablet.

[jslegers]

@steeleprice :

Do you need this to work in IE6 and IE7?

If you need to support both IE6 or IE7, the cleanest solution would be to create a faux input box :

• Add a wrapper around your input elements
• Remove all padding and border from the input element.
• Add the padding and border to the wrapper.

Basicly, that amounts to adding the following code to your CSS :

CSS

            #address .inputbox {
                border-width:1px;
                padding: 4px;
                -webkit-border-radius:3px;
                -moz-border-radius:3px;
                border-radius:3px;
            }

            #address input {
                width:100%;
                padding: 0;
                border-width:0;
            }

            #address input:focus {
                border:0;
                -webkit-box-shadow:none;
                -moz-box-shadow:none;
                box-shadow:none;
            }

Then, change your HTML to this :

HTML

<form id="address">
    <div class="col">
        <div class="cell">
            <div class="inputbox">
                <input type="text" id="street" placeholder="Street" />
            </div>
        </div>
    </div>
    <div class="col">
        <div class="col size1of2 tablet-size1of2">
            <div class="cell">
                <div class="inputbox">
                    <input type="text" id="locality" placeholder="City" />
                </div>
            </div>
        </div>
        <div class="col size1of4 tablet-size1of4">
            <div class="cell">
                <div class="inputbox">
                    <input type="text" id="region" placeholder="State" />
                </div>
            </div>
        </div>
        <div class="col sizefill tablet-sizefill">
            <div class="cell">
                <div class="inputbox">
                    <input type="text" id="region" placeholder="PostalCode" />
                </div>
            </div>
        </div>
    </div>
</form>

If you want to support IE7 but you don't care about IE6, you might want to try this :

CSS

            #address input {
                width:100%;
                -moz-box-sizing: border-box; 
                -webkit-box-sizing: border-box; 
                box-sizing: border-box;
                *padding-right:0;
            }

Then, change your HTML to this :

HTML

<form id="address">
    <div class="col">
        <div class="cell">
            <input type="text" id="street" placeholder="Street" />
        </div>
    </div>
    <div class="col">
        <div class="col size1of2 tablet-size1of2">
            <div class="cell">
                <input type="text" id="locality" placeholder="City" />
            </div>
        </div>
        <div class="col size1of4 tablet-size1of4">
            <div class="cell">
                <input type="text" id="region" placeholder="State" />
            </div>
        </div>
        <div class="col sizefill tablet-sizefill">
            <div class="cell">
                <input type="text" id="region" placeholder="PostalCode" />
            </div>
        </div>
    </div>
</form>

It looks slightly less clean in IE7 than IE8 and up, but it still looks pretty decent.

[steeleprice]

Awesome, thanks for the thorough response. I have it working now after this explanation about wrapping. We are only concerned about ie9+ and recent smartphones since this is all HTML5.

[jslegers]

I'm glad I've been able to help you.

Let me know when you finish a project based on Cascade Framework that's publicly accessible. The project needs more "in the wild" examples for its showcase.