Form Adaptiveness
Adaptiveness is an advanced capability that allows you to configure the Kendo UI for Angular Form to display in different layouts depending on the screen size.
The Form adaptiveness is the ability of the Kendo components to automatically adjust their layout, behavior, and appearance according to the device and screen size. This ensures that the form remains user-friendly and visually appealing on both mobile and desktop devices. Internal components like Kendo UI for Angular DropDowns appear in a completely new layout depending on the device.
The following example demonstrates how the Form adapts to different screen sizes. Use the device settings panel to choose the desired screen size and observe how the layout responds accordingly.
Adaptive Breakpoints
The cols, colSpan, and gutters properties can be configured to change dynamically based on screen size, allowing you to create flexible and user-friendly forms that look great on any device. All responsive features support the ResponsiveFormBreakPoint interface, which defines breakpoint ranges and their corresponding values:
public responsiveBreakpoints: ResponsiveFormBreakPoint[] = [
{ minWidth: 0, maxWidth: 600, value: 1 }, // Mobile: 1 column
{ minWidth: 601, maxWidth: 900, value: 2 }, // Tablet: 2 columns
{ minWidth: 901, value: 3 } // Desktop: 3 columns
];Each breakpoint object contains:
minWidth—Minimum screen width (in pixels) for this breakpoint.maxWidth—Maximum screen width (optional; omit for the largest breakpoint).value—The value to apply (number of columns, pixels for gutters).
Columns
You can control the number of columns in Form or FormFieldSet containers using the cols property. This property accepts either a number or an array of ResponsiveFormBreakPoint objects to define how many columns to display at different screen sizes.
<form kendoForm [cols]="responsiveColumns">
<fieldset kendoFormFieldSet [cols]="responsiveFieldsetColumns">
...
</fieldset>
</form>Column Spanning
You can control how many columns a FormField, FormFieldSet, or FormSeparator spans by using the colSpan property. This property accepts either a number or an array of ResponsiveFormBreakPoint objects to define how many columns the field needs to span at different screen sizes.
<form kendoForm [cols]="4">
<kendo-formfield [colSpan]="responsiveSpanning"> </kendo-formfield>
<fieldset kendoFormFieldSet [colSpan]="responsiveSpanning">
<kendo-formfield> ... </kendo-formfield>
<kendo-formfield> ... </kendo-formfield>
</fieldset>
<kendo-formseparator [colSpan]="responsiveSeparatorSpan"> </kendo-formseparator>
</form>Gutters
You can control the spacing between form elements using the gutters property. You can set the gutters to the Form component or to the FormFieldSet component.
The gutters property accepts:
- A number (fixed pixels).
- An array of
ResponsiveFormBreakPointobjects to define gutter sizes for different screen sizes. Guttersinterface which allows you to set different pixel values for the columns and rows of the form.
<form kendoForm [gutters]="responsiveGutters">
<fieldset kendoFormFieldSet [gutters]="gutters">
<kendo-formfield> </kendo-formfield>
<kendo-formfield> </kendo-formfield>
</fieldset>
</form>public responsiveGutters: ResponsiveFormBreakPoint[] = [
{ minWidth: 0, maxWidth: 400, value: 1 },
{ minWidth: 401, maxWidth: 600, value: 2 },
{ minWidth: 601, maxWidth: 900, value: 3 }
];
public gutters: Gutters = {
columns: 10, // 10px gutter between columns
rows: 5 // 5px gutter between rows
};