Edit this page

Responsive, Adaptive and Elastic Capabilities

To fit into a responsive page design, the controls from the UI for ASP.NET AJAX suite offer a set of features that let you integrate them into the page's design by making use of their responsive, adaptive, elastic and fluid capabilities. A list is available in Table 1.

A control can hardly be considered responsive by itself, because this heavily depends on the layout and design of the page it is placed on. Nevertheless, here follow the guidelines we use to define a control as responsive, elastic, adaptive or fluid:

  • Fluid (Figure 1)—a fluid control can take up 100% of the width of its parent and resize with it in real-time (as opposed to stretching initially and not responding to a container size change).

  • Responsive (Figure 2)—the control will have the same HTML rendering in all resolutions, but CSS rules or JavaScript logic may reorder, resize or even hide certain elements from its UI to make it more suitable for the current dimensions.

  • Elastic (Figure 3)—this means that a font-size change will resize the control elements accordingly. This is usually achieved by using em units for font-size and padding settings. Example 1 at the end of this article shows the selectors for all controls that support elastic design. You can read more about each specific control in the articles linked in Table 1.

  • Adaptive (Figure 4)—an adaptive control can change its HTML rendering and layout according to the device it is displayed on. Usually, at least one mode is optimized for mobile devices.

Figure 1: Fluid control concept

Figure 2: Responsive control concept

Figure 3: Elastic control concept

Figure 3: Adaptive control concept

Table 1: A list with the responsive capabilities the controls from the UI for ASP.NET AJAX suite offer.

Control Elastic Fluid Responsive Adaptive
Ajax N/A N/A N/A N/A
AutoCompleteBox Yes Yes N/A N/A
Barcode N/A N/A N/A N/A
BinaryImage N/A N/A N/A N/A
Button Yes Yes No No
Calendar Yes Yes No No
Captcha N/A No N/A N/A
Chart (HTML5) N/A N/A (but possible) N/A (but possible) N/A
Chart N/A N/A N/A N/A
CheckBox Yes Yes No No
ColorPicker Yes No No No
ComboBox Yes Yes N/A N/A
DataForm Yes Yes No No
DataPager Yes Yes Yes Yes
Diagram N/A N/A N/A N/A
Dock Yes N/A Yes N/A
DropDownList Yes Yes N/A N/A
DropDownTree Yes Yes N/A N/A
Editor Yes Yes Yes Yes
FileExplorer Limited Yes No No
Filter Yes No No No
FormDecorator Yes Yes Yes N/A
Gantt Yes Yes Yes No
Gauge N/A N/A N/A N/A
Grid No Yes No Yes
ImageButton Yes Yes No No
ImageEditor Yes Yes No No
ImageGallery Yes Yes Yes Yes
Input Yes No N/A No
LightBox Yes Yes No Yes
LinkButton Yes Yes No No
ListBox Yes Yes N/A N/A
ListView No Yes No No
Map Yes Yes N/A N/A
MediaPlayer Yes Yes No Yes
Menu Yes Yes Yes (custom CSS) Yes
Notification Yes Yes Yes N/A
ODataDataSource N/A N/A N/A N/A
OrgChart Yes N/A N/A N/A
PanelBar Yes Yes N/A N/A
Persistence Framework N/A N/A N/A N/A
PivotGrid Yes Yes No No
Progress Area Yes Yes No No
Progress Bar Yes Yes Yes No
PushButton Yes Yes No No
Rating Yes No No N/A
RibbonBar Yes Yes No No
Rotator Yes Yes No N/A
Scheduler No Yes N/A Yes
SearchBox Yes No N/A N/A
SiteMap Yes Yes N/A N/A
Slider Yes Yes Yes N/A
SocialShare Yes Yes No No
Spell No No No No
Splitter Limited Yes Yes N/A
TabStrip Yes Yes N/A N/A
TagCloud Yes N/A Yes N/A
Ticker Yes Yes No N/A
Tile Yes Yes N/A N/A
TileList Yes Yes Yes Yes
ToolBar Yes Yes Yes N/A
ToolTip Yes N/A Yes N/A
ToggleButton Yes Yes N/A N/A
TreeMap Yes Yes No No
TreeList Yes Yes No No
TreeView Yes No N/A N/A
Upload (Async) Yes Yes No No
Upload (Cloud) Yes Yes No No
Window Yes No No N/A
Wizard Yes Yes Yes Yes
XmlHttpPanel N/A N/A N/A N/A
ZipLibrary N/A N/A N/A N/A

CSS Selectors for Elastic Design

Example 1 demonstrates how setting the default font size of the page can affect all Telerik controls in it.
Example 2 provides the CSS selectors that let you resize the supported controls' UI elements via a font-size change. You can find detailed explanations on how this feature is supported in each control in Table 1 above. Example 3 shows the selectors used for RadFormDecorator. For more information, see the Elastic capabilities in RadFormDecorator help article.

note

As of 2016 Q1 SP1 each Telerik® UI for ASP.NET AJAX control takes the font-size of the page automatically. If the developer does not set it explicitly (Example 1), this is up to the client's browser and a common default value is 16px.

Example 1: Setting default font for the page with the default value for the Telerik controls.

body {
    font-size: 20px;
    font-family: "Segoe UI", Arial, Sans-serif;
}

Example 2: CSS selectors to make avail of the elastic design capabilities of the controls in the UI for ASP.NET AJAX suite

/* AutoCompleteBox */ html .RadAutoCompleteBox, html .RadAutoCompleteBoxPopup,
/* Button */ html .RadButton,
/* Calendar */ html .RadCalendar,
/* ComboBox */ html .RadComboBox, html .RadComboBoxDropDown,
/* DataForm */ html .RadDataForm,
/* DataPager */ html .RadDataPager,
/* Dock */ html .RadDock,
/* DropDownList */ html .RadDropDownList, html .rddlPopup,
/* DropDownTree */ html .RadDropDownTree, html .rddtPopup,
/* Editor */    div.RadEditor,
                div.RadEditor .reToolbarWrapper,
                div.RadEditor .reToolBar
                 div.reDropDownBody
/* Filter */ html .RadFilter, html .RadMenu,
/* Gantt */ html .RadGantt,
/* ImageGallery */ html .RadImageGallery,
/* Input */ html .RadInput,
/* LightBox */ html .RadLightBox,
/* ListBox */ html .RadListBox,
/* Map */ html .RadMap,
/* MediaPlayer */ html .RadMediaPlayer,
/* Menu */ html .RadMenu,
/* Notification */ html .RadNotification,
/* PanelBar */ html .RadPanelBar,
/* PivotGrid */ html .RadPivotGrid,
                html .PivotGridWindow,
/* ProgressBar */ html .RadProgressBar,
/* Rating */ html .RadRating,
/* Rotator */ html .RadRotator,
/* SearchBox */ html .RadSearchBox, html .rsbPopup,
/* SiteMap */ html .RadSiteMap,
/* Slider */ html .RadSlider,
/* SocialShare */ html .RadSocialShare,
/* TagCloud */ .RadTagCloud,
/* Ticker */ body, /* or any other selector that will affect the ticker */
/* ToolTip */ html .RadToolTip,  
/* TreeMap */ html .RadTreeMap,
/* TreeList */ html .RadTreeList,
/* TreeView */ html .RadTreeView,
/* Window */ html .RadWindow {
    font-size: 24px;
}

Example 3: CSS selectors to make avail of elastic design capabilities for elements decorated by RadFormDecorator

/* FormDecorator */
html.RadForm .rfdSkinnedButton,
html.RadForm .rfdTextInput,
html.RadForm.rfdLabel label,
html.RadForm.rfdLabel .rfdAspLabel,
html.RadForm.rfdTextbox input,
html.RadForm.rfdTextarea textarea,
html.RadForm.rfdFieldset fieldset,
html.RadForm.rfdFieldset legend,
html.RadForm .rfdSelect,
html.RadForm.rfdHeading h4,
html.RadForm.rfdHeading h5,
html.RadForm.rfdHeading h6,
html.RadForm .riTextBox,
html.RadForm .rfdValidationSummaryControl,
html.RadForm .rfdLoginControl {
    font-size: 24px;
}

/* Headings */
html.RadForm.rfdHeading h4 {
    font-size: 40px;
}
html.RadForm.rfdHeading h5 {
    font-size: 35px;
}
html.RadForm.rfdHeading h6 {
    font-size: 30px;
}

/* ListBox Styles */
html.rfdSelectBox {
    font-size: 24px;
}

/* drop down arrow positions should be tweaked */
html.RadForm .rfdDropDownArrow
{
    right: 10px;
    top: 10px;
}

/* checkboxes and radio buttons' positions should be tweaked */
html.RadForm .rfdCheckboxChecked .rfdToggleImage,
html.RadForm .rfdCheckboxUnchecked .rfdToggleImage,
html.RadForm .rfdRadioChecked .rfdToggleImage,
html.RadForm .rfdRadioUnchecked .rfdToggleImage
{
    top: 10px;
}

See also