Edit In Place: Size Of Form Fields

I forgot to discuss how the size of the form fields work in my version 0.2.0 announcement. The EditInPlace.formField() function does the work of building the form fields, just in case you want to follow along as I describe how this works.

For text fields I look at the length of the string and add 10 to come up with the size setting. To make sure that things don’t get too big the size is capped at 100. If you have a specific size that you want the text field to be you can include the ‘size’ option. If the size option is provided then it overrides the plus 10 size calculation and the maximum of 100. This allows you to make text fields any size you want. Here’s an example:

EditInPlace.makeEditable( {
    type: 'text',
    size: 25,
    id: 'username',
    save_url: 'edit.php'
} );

The textarea control works in a very similar way. The default number of columns is 50, but you can override that using the ‘cols’ option. The number of rows is determined by taking the length of the text, divided by columns (cols) plus 3. The hope is that this provides enough room for additional text to be typed in before the textarea starts to scroll and get cramped. You can set the number of rows to use by passing the ‘rows’ option. Here’s an example of how to do this:

EditInPlace.makeEditable( {
    type: 'textarea',
    cols: 40,
    rows: 2,
    id: 'bookdescription',
    save_url: 'edit.php'
} );

I tried to make the defaults reasonable while still allowing you easily override them if you know exactly what sizes you want.