Blazor Data Form Example - Adaptive Layout
The example below demonstrates the adaptive layout structure of the Blazor Data Form component. The form fields' dimensions dynamically adjust when the screen size changes or when rendered on various devices with differing screen dimensions. This feature can be implemented using the Blazor Media Query component.
Blazor Media Query consists of three breakpoints. For the Small screen size (less than or equal to 768px), both the FormGroup and FormItems column will be singular. For the Medium screen size (between 768px and 1024px), the FormGroup column will be dual, and FormFields, if rendered with half the column size, will change to full width. For the Large screen size (greater than or equal to 1024px), both the Form and FormGroup will consist of two columns; if the ColumnSpan property is specified, the FormFields will also split.