The ASPxCardView control allows you to create adaptive layouts that ensure a consistent appearance on different devices.
Card View Layout
The Card View includes three layout modes that allow you to define the number and arrangement of cards displayed on a single page. You can specify the layout mode by setting the ASPxCardViewSettings.LayoutMode property to one of the following values.
Layout.Breakpoints - Reorganizes cards according to custom layout scenarios for different browser widths. It allows you to display, for example, three cards in a row for smaller screens or five cards in a row for larger screens.
This functionality is based on specifying the browser widths (breakpoints) at which the grid shifts and resizes its items to arrange the control's content.
The ASPxCardView cards have a fixed height (specified in the .dxcvFlowCard_<ThemeName> or .dxcvBreakpointsCard_<ThemeName> CSS selectors) when the control is in Flow or Breakpoints layout modes. Use the ASPxCardView.Styles.FlowCard.Height or ASPxCardView.Styles.BreakpointCard.Height (CardViewCardStyle.Height) properties to specify a custom card's height in these modes.
The Adaptive Layout demo illustrates the Card View with the form layout in adaptive mode.
The Card View control also incorporates adaptive popup dialogs based on Popup Control's adaptive mode. In adaptive mode, the popup dialog is transformed into a modal window that covers the screen's content.
You can access the popup dialog's settings using its SettingsAdaptivity property. The table below lists available dialogs.