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

Thread is closed for posting
1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 12 Dec 2015 Link to this post


    Telerik Product and Version

    Q3 2015 and above

    Supported Browsers and Platforms

    All currently supported browsers

    Components/Widgets used (JS frameworks, etc.)


    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).


    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:
      <add key="Telerik.Web.UI.RenderMode" value="Lightweight"/>

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.