The DevExpress ASP.NET MVC Form Layout (FormLayout) extension allows you to create adaptive grid layouts so that the editor's content looks consistent across all devices. This functionality uses breakpoints at which the editor shifts, resizes, or moves its items to a new line. It allows you to create, for example, a two-column layout for narrow screens or a three-column layout for wider screens.
In this demo, resize the browser or drag the Form Layout to see how the editor adjusts its content to different widths. Layout elements change their position and size at each breakpoint according to each form layout item's specified span rules.
The Form Layout stores breakpoints (LayoutBreakpoint class instances) in its Breakpoints collection. Breakpoints define different screen sizes' column count (ColumnCount) and width (MaxWidth) specifications.
Each Form Layout item provides the SpanRules collection that can contain SpanRule object(s). The SpanRule.RowSpan and SpanRule.ColumnSpan properties set how many columns and rows a layout item should occupy until the FormLayout's width reaches the LayoutBreakpoint.MaxWidth property value. The SpanRule.BreakpointName property binds each span rule to a corresponding group layout (LayoutBreakpoint.Name property).
Local Copy of this Demo To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer. |
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxNavigationAndLayoutDemos |