10. Automatic Resizing of Form Controls

When HTML & XHTML form controls such as input fields and textareas are rendered on screen, they usually have a fixed size determined by their attributes or by the browser. If the content of the form control is larger than the form control itself, the browser usually adds scroll bars to the control or allows navigation using a caret.

This, of course, is not possible on print or in a paged environment. To overcome this, PDFreactor supports some style properties which allow the automatic resizing of form controls according to their content. If these properties are set, the form controls' size automatically adjusts according to its content.

These properties are: "-ro-width" and "-ro-height".

"-ro-width" automatically adjusts the width of a form control if the contents' width exceeds the width defined for the form control.

"-ro-height" automatically adjusts the height of a form control if the contents' height exceeds the height defined for the form control.

Example usage of these properties:

input[type="text"] {
    -ro-width: auto;
}
textarea {
    -ro-height: auto;
}