Change Theme Settings
Change Theme Settings
Show All Themes

Responsive Layout

The ASPxPanel control allows you to build adaptive page layouts with ease.

The ASPxPanel control can collapse or hide its content. To enable collapse functionality, the Collapsible property is set to true.

When collapse functionality is enabled, the Panel control can function adaptively, i.e., it can automatically collapse or hide its content when the browser window is resized. In this demo, adaptive behavior is defined for individual panels using options accessible via the SettingsAdaptivity property.

Collapsing Content: The panel collapses its content when browser window dimensions are less than the values defined by the CollapseAtWindowInnerHeight and CollapseAtWindowInnerWidth properties.

Hiding Content: The panel hides its content when browser window dimensions are less than the values defined by the HideAtWindowInnerHeight and HideAtWindowInnerWidth properties.

End-users can expand the collapsed panel. The panel allows you to define the content that will be displayed within the expanded panel. In this demo, the panel "TopPanel" ID displays a horizontal menu when screen width is greater than 580px, and displays a vertically oriented menu when screen width is less than 580px and the panel is expanded. Expanded panel content is defined using the ExpandedPanelTemplate template.

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).
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxNavigationAndLayoutDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxNavigationAndLayoutDemos