Expanding form

I need to build a form where we have a dropdown pick list (combobox) where the user picks a category and based on the category the necessary fields are displayed further down on the form. This requires adding/removing the fields dynamically and, importantly, allowing the form to re-size (mostly in height - either taller or shorter) to accommodate the fields.

What is the best way to accomplish the resizing aspect of this using dhtmlxForm? Will it dynamically grow if we insert additional input elements?


which component used as parent node for dhtmlx form?

regarding nested lists you can try the following:

var formData = [ {type: "settings", position: "label-left", position: "label-right"}, {type: "combo", label: "Select", name: "format", labelWidth: 50, inputWidth: 160, position: "label-left", options: [ {text: "Option 1", value: "1", list: [ {type: "checkbox", name: "ch1", value: "r1", label: "Line numbers", checked: true}, {type: "checkbox", name: "ch2", value: "r2", label: "Line selection area", checked: true} ]}, {text: "Option 2", value: "2", selected: true, list: [ {type: "checkbox", label: "Highlight current line", checked: true}, {type: "checkbox", label: "Show structure scope", checked: true}, {type: "checkbox", label: "Show marker position", checked: true} ]}, {text: "Option 3", value: "3", list: [ {type: "checkbox", label: "Drag-n-drop in text area", checked: true}, {type: "checkbox", label: "Double-click drag joins non-alphanumeric characters", checked: true}, {type: "checkbox", label: "Quick copy using middle mouse button"}, {type: "checkbox", label: "Switch to rectangular selection while Ctrl is pressed", checked: true} ]}, {text: "Option 4", value: "4", list: [ {type: "radio", name: "plugins", label: "Install into home directory", checked: true}, {type: "radio", name: "plugins", label: "Install into application directory"} ]} ]} ];