Styling Input controls (like RadTextBox, RadDatePicker, RadComboBox, etc.) and the Associated Labels

Requirements
Telerik Product and Version	Q3 2015 and above
Supported Browsers and Platforms	All currently supported browsers
Components/Widgets used (JS frameworks, etc.)

PROJECT DESCRIPTION

This Code Library demonstrates how to style your forms, so that the input controls (RadTextBox, RadDatePicker, RadComboBox, etc.) could have an associated label to them and in the same time, have unified width.

In the attached page you will find three different configurations and approaches:

1. The first configuration is using the Label property of the controls, which in most cases is the recommended approach, because for complex controls it will not be possible to associate the generated label element to the input element (for example, the RadComboBox).
2. The second configuration is using the same approach as the first one, but it uses two columns for some of the input controls.
3. The last configuration is using a combination of Label controls associated with the input controls and the Label property (for the RadComboBox)

For clarity, the corresponding styles for each form configuration are placed above the wrapping Panel controls (form1Wrapper, form2Wrapper and form3Wrapper).


IMPORTANT NOTE

All of the approaches are applicable for Lightweight render mode only, so please include the following in your web.config file in order to set the Lightweight rendering for all controls: