Customize all telerik fields 'Width' Property from an external CSS

2 posts, 0 answers
  1. Vargis
    Vargis avatar
    25 posts
    Member since:
    Dec 2011

    Posted 30 Jun 2012 Link to this post

    Problem 1

    As you described in your own website
    http://www.telerik.com/help/aspnet-ajax/input-css-width.html

    CssClass="TextBoxClass" is not working in telerik:RadTextBox. Its default width is rendering. Here is the css and aspx part.

    CSS---------------------------------------------------------------------------------------------------------------------------------------------------------------

    .divcol-S .TextBoxClass {width:70%!important}

    ASP Page---------------------------------------------------------------------------------------------------------------------------------------------------------------------

    <div class="divcol-S">

    <asp:Label ID="Label26" runat="server" Text="Vessel Name"></asp:Label>
    <telerik:RadTextBox ID="txtVesselName" runat="server" CssClass="TextBoxClass"></telerik:RadTextBox>

    <asp:Label ID="Label29" runat="server" Text="Vessel Type" ></asp:Label>
    <telerik:RadComboBox ID="ddlVesselType" runat="server" CssClass="TextBoxClass"></telerik:RadComboBox>

    </div>
    _________________________________________________________________________________________________________________________________________________


    Problem 2

    As you described in your own website
    http://www.telerik.com/help/aspnet-ajax/input-css-selectors.html

    .riTextBox - INPUT OR TEXTAREA - The common class for the input area in all states. (from your own words)
    (These class names are for the "Default" skin. For other skins, replace the string "Default" with the name of the skin.)

    This means we can change the property of input/textarea globally in the entire application with this specific ClassName .riTextBox.
    So no need to put CssClass on every <telerik:RadTextBox> control. But unfortunately this also not working.


    CSS---------------------------------------------------------------------------------------------------------------------------------------------------------------

    .divcol-S .riTextBox {width:70%!important}

    ASP Page---------------------------------------------------------------------------------------------------------------------------------------------------------------------

    <div class="divcol-S">

    <asp:Label ID="Label26" runat="server" Text="Vessel Name"></asp:Label>
    <telerik:RadTextBox ID="txtVesselName" runat="server" ></telerik:RadTextBox>

    <asp:Label ID="Label29" runat="server" Text="Vessel Type" ></asp:Label>
    <telerik:RadComboBox ID="ddlVesselType" runat="server" ></telerik:RadComboBox>

    </div.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Jul 2012 Link to this post

    Hi Vargis,

    I would suggest that you use the following css class selectors in order to set width of the different controls that you have on the page:
    <style type="text/css">
           /*setting width to the RadTextBox*/
           .riTextBox
           {
               width: 200px !important;
           }
            
           /*setting width to the outer div */
           .divcol-S
           {
               width: 70%;
           }
            
           /* setting width to the RadComboBox control*/
           .RadComboBox.RadComboBox_Default
           {
               width: 260px !important;
           }
       </style>

    Here is also the markup that I used for testing purpose:
    <div class="divcol-S">
            <asp:Label ID="Label26" runat="server" Text="Vessel Name"></asp:Label>
            <telerik:RadTextBox ID="txtVesselName" runat="server">
            </telerik:RadTextBox>
            <asp:Label ID="Label29" runat="server" Text="Vessel Type"></asp:Label>
            <telerik:RadComboBox ID="ddlVesselType" runat="server">
                <Items>
                    <telerik:RadComboBoxItem Text="item1" />
                    <telerik:RadComboBoxItem Text="item2" />
                </Items>
            </telerik:RadComboBox>
        </div>

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top