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

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

    Thanks in Adv
  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 04 Jul 2012 Link to this post

    Hello Vargis,

    With the new Single Input Rendering you should use the WrapperCssClass property to set the width of this RadControl
    <%@ Page Language="C#" AutoEventWireup="true" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title>RadGrid</title>
        <telerik:RadCodeBlock runat="server">
            <style type="text/css">
                .TextBoxClass
                {
                    width: 200px !important;
                }
            </style>
        </telerik:RadCodeBlock>
        <style type="text/css">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="scriptManager" runat="server">
        </telerik:RadScriptManager>
        <div style="background: red;" class="TextBoxClass">This div is 200px wide</div>
        <br />
        <telerik:RadTextBox ID="RadTextBox1" runat="server" WrapperCssClass="TextBoxClass"
            Text="200px">
        </telerik:RadTextBox>
        <br /><br />
        <telerik:RadTextBox ID="RadTextBox2" runat="server" ShowButton="true" Text="200px" WrapperCssClass="TextBoxClass" />
        </form>
    </body>
    </html>


    I hope this helps.


    Greetings,
    Galin
    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
  4. Vargis
    Vargis avatar
    25 posts
    Member since:
    Dec 2011

    Posted 05 Jul 2012 Link to this post

    Sorry to say Big No.
    We have hundreds of such controls in every page. So want to control commonly from an external CSS file.
    Never we can use width in pixel only percentage.
Back to Top