The align property allows you to set aligning direction for all controls in Form.
You can apply various options of alignment for different control groups by specifying the align property for the rows and cols:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
height: "150px",
width: "400px",
align: "start",
padding: "20px",
rows: [
{
padding: "10px",
align: "start",
cols: [
{
name: "radiogroup",
type: "radioGroup",
label: "Do you agree with our terms and conditions?",
value: "agree",
options: {
cols: [
{
type: "radioButton",
text: "Yes",
value: "agree",
},
{
type: "radioButton",
text: "No",
value: "disagree"
},
]
},
},
]
}
]
});
Related Sample: Form. Alignment
Related sample: Form. Change Form configuration
Grouping Controls in FormâYou can combine controls into groups by placing controls into rows and columns with any level of complexity. To do this, use the rows and cols options in the configuration object of the component:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
cols: [
{
align: "center",
rows: [
{
title: "Align:",
padding: "10px",
align: "around",
css: "dhx_layout-cell--bordered",
rows: [
{
type: "radioGroup",
name: "align",
options: {
padding: "10px",
align: "center",
rows: [
{
type: "radioButton",
text: "start",
value: "start",
checked: true,
autoWidth: true,
},
{
type: "radioButton",
text: "center",
value: "center",
autoWidth: true,
},
],
},
},
],
},
{
title: "Direction:",
css: "dhx_layout-cell--bordered dhx_layout-cell--no-border_top",
padding: "10px",
rows: [
{
type: "radioGroup",
name: "dir",
options: {
padding: "10px",
align: "center",
cols: [
{
type: "radioButton",
text: "as rows",
value: "rows",
checked: true,
autoWidth: true,
},
{
type: "radioButton",
text: "as cols",
value: "cols",
autoWidth: true,
},
],
},
},
],
},
],
}
]
});
Related sample: Form. Change Form configuration
Making Form disabledâRelated sample: Form. Disabled
By default, Form is enabled. To make Form disabled, set the disabled configuration property to true:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
disabled: true
});
By default, Form is visible. To make Form hidden, set the hidden configuration property to true:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
hidden: true
});
To generate space around a control group, make use of the padding parameter:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
padding: "20px",
rows: [
{
type: "text",
name: "text",
value: "Do you agree with our terms and conditions?"
},
{
padding: "10px",
cols: [{
type: "checkbox",
width: "80px",
label: "I agree",
name: "agree",
checked: true
},
{
type: "checkbox",
label: "I disagree",
name: "align",
}]
}
]
});
You can define a title for a control group with the help of the title property:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
padding: "20px",
title: "Form",
rows: [
{
padding: "10px",
title: "Checkbox controls of Form",
css: "dhx_widget--bordered",
cols: [{
type: "checkbox",
width: "80px",
label: "I agree",
name: "agree",
checked: true
},
{
type: "checkbox",
label: "I disagree",
name: "align",
}]
}
]
});
You can adjust sizes of a control group with the corresponding properties height and width:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
height: "200px",
width: "400px",
padding: "20px",
rows: [
{
type: "text",
name: "text",
value: "Do you agree with our terms and conditions?"
},
{
padding: "10px",
height: "100px",
width: "200px",
align: "end",
cols: [{
type: "checkbox",
width: "80px",
label: "I agree",
name: "agree",
id: "agree",
checked: true
},
{
type: "checkbox",
label: "I disagree",
name: "align",
}]
}
]
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4