Resizing Text Boxes

Updated on

The standard size of a text box is often too small to encourage good data entry. You can increase the size of text fields (height and width) by adding the appropriate attributes to the form.

Option 1 - Using the Editor

To use the editor, you need to double click on the text field so that the field attribute section displays in the HTML editor.
 
Here is what it looks like when a text field is not selected:
Resizing_1.png
 
and here is what it looks like when it is selected:
Resizing_2.png
 
Once you see the Width and Height options for your field, you can set the width and height of the text element in pixels. e.g. "400px". This will add a style attribute to the text field. Note that you need to click elsewhere on the form or tab away from the field to set the attribute.

Option 2 - Adding HTML to your Field

While the Editor works, it is a bit finicky to use and browser dependent. You can also update the HTML directly to achieve the same results. The code in blue shows how to update a Sonic Form element with these attributes:
 
<input tabindex="0" vaatt="Money.2" value="MyTableName.MyFieldName" va_val="read_only." type="text" style="width: 200px; height: 300px;" />