Responsive Complex Forms

Making a simple form responsive has been written about. But what if you have a more complex form or a more complex layout requirement?

That's what this article is about.

The technique described here assumes a two-column centered layout for wider screens and a one-column centered layout for narrower screens.

If you're new to responsive forms, read the above-linked item first. It contains the basics for making a form's field width responsive to the available space.

Here, you'll find advanced techniques.

The first advanced technique is using a special CSS rule for better control of responsive width for text, textarea, select, and button form fields.

(Note: I'm using points for CSS measurements instead of pixels because pixel resolution is changing and inconsistent from device to device. Points is a measurement independent of resolution.)

Responsive Form Field Width

Generally, the CSS declaration width:100%; and max-width:300pt; are sufficient to make the fields as wide as possible, to a maximum width, and yet be responsive to smaller browser or screen dimensions. However, when a specific width or max-width is specified, the dimension is measured without taking into consideration any borders or padding.

One would think the width of a field includes it's borders, and any padding between the border and the content. But that's not the case with the CSS width and max-width measurements. The calculated dimension only includes the content of the field. Any borders and padding are published outside the calculated dimension.

Text fields, dropdowns, and buttons have borders and padding. Even with the same CSS width or max-width measurement, they can end up being published with different dimensions.

The solution is the box-sizing property and its browser variants. Example:

select,
textarea, 
input[type="text"], 
input[type="email"], 
input[type="submit"], 
input[type="button"] {
   width:100%;
   max-width:300pt;
   -moz-box-sizing:border-box; 
   -webkit-box-sizing:border-box; 
   box-sizing:border-box;
   }

The box-sizing property with value border-box tells the browser to include the borders (and any padding) when determining the field widths.

In the example CSS, customize the max-width value, colored blue, and add input types as needed. With the CSS in place, you're prepared to put form fields into containers of any width and have the field widths publish as expected.

Responsive Layout

Let's suppose the following layout is desired:

1. When the available space is at least 400 points wide, the form is in two columns. If the available space is wider than the form requires, the form is centered in the space.

2. When the available space is less than 400 points wide, the form is in one column and either centered in the space or width reduced to fit into the space.

Here's an example form. Notes and the code follow.

Vary the width of the browser window to see the form change from two-column to one-column. When the width of the available space is insufficient to display the two columns, the table is transformed into one column.

Here's the CSS.

<style type="text/css">
select,
textarea, 
input[type="text"], 
input[type="email"], 
input[type="submit"], 
input[type="button"] {
   width:100%;
   max-width:300pt;
   -moz-box-sizing:border-box; 
   -webkit-box-sizing:border-box; 
   box-sizing:border-box;
   }

.form-container {
	max-width:400pt;
	margin:0 auto;
	}

.form-part1-container { 
	width:190pt; 
	float:left;
	}

.form-part2-container { 
	width:190pt; 
	float:right;
	}

.clear-floats {
	clear:both;
	}


/* Adjust max-width as needed. */
@media screen and (max-width:650pt)
{
	.form-container {
		display:table;
		}

	.form-part1-container { 
		width:100%;
		max-width:190pt; 
		float:none;
		}

	.form-part2-container { 
		width:100%;
		max-width:190pt; 
		float:none;
		}

	.clear-floats {
		clear:none;
		}
} /* end of @media screen and (max-width:650pt) */
</style>

A div with class form-container contains the form.

The form is in two divs, one with class form-part1-container and the other with class form-part2-container

When the browser window is wide enough for the two-column table, the two parts of the form are floated left and right, with a gutter space between them. The class clear-floats is used to clear the floats.

That's for the two-column form.

What happens when the @media tag kicks in —

When the browser window is too narrower for the two-column table, the form is transformed into one column. The transformation is accomplished with a @media tag:

@media screen and (max-width:650pt)

You'll need to adjust the max-width value to accomodate your page width, a width which includes any other columns on the page. If you're uncertain about what the max-width value needs to be, give it a guess and try it out. Then tweak as needed.

Within the @media tag, the class form-container has the display:table; declaration added so the width of the div automatically becomes the width of the one-column table.

Also within the @media tag, the classes form-part1-container and form-part2-container have width changed to 100%, a max-width added, and the float changed to none. These changes make the form width the full width of the available space up to a maximum of 190 points. The float property's value none makes it non-floating.

The class clear-floats has the clear property's value changed to none because with nothing floating there's none to clear.

Here's the form code used in the example:

<div class="form-container">

<div class="form-part1-container">
<p>
Name:<br>
<input type="text" placeholder="Your name">
</p>
<p>
Email:<br>
<input type="email" placeholder="Your email address">
</p>
</div><!-- end of class="form-part1-container" -->

<div class="form-part2-container">
<p>
<input type="checkbox" name="good" value="good"> The world is round.
</p>
<p>
I am <input type="radio" name="iam" value="over">over <input type="radio" name="iam" value="under">under age 30.
</p>
<p>
<select><option>Select favorite color</option>
<option>Blue</option>
<option>Yellow</option>
<option>Some other color</option>
</select>
</p>
<p>
<input type="button" value="Button to click" onclick="alert('ooh, that tickled!')">
</p>
</div><!-- end of class="form-part2-container" -->

<div class="clear-floats"></div>

</div><!-- end of class="form-container" -->

The two parts of the form are contained in the div with class="form-container".

The form's two parts are in the divs with class form-part1-container and form-part2-container. Following the two form parts is the div with class clear-floats to clear the floats whenever the table is displayed in two columns.

Those advanced techniques, field width and column transformation, provide a base on which other forms and layout requirements can be created.

Specific field widths are affected by border size and padding unless the box-sizing property is set to border-box. Layout transformation between two-column and one-column tables can be accomplished by updating certain CSS declarations within a @media tag block.

(This article first appeared in Possibilities ezine.)

Will Bontrager