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

[Vargis]

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.

[Kate]

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