This is a migrated thread and some comments may be shown as answers.

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

1 Answer 81 Views
ScriptManager and StyleSheetManager
This is a migrated thread and some comments may be shown as answers.
Vargis
Top achievements
Rank 1
Vargis asked on 30 Jun 2012, 05:53 AM
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.

1 Answer, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 04 Jul 2012, 04:07 PM
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.
Tags
ScriptManager and StyleSheetManager
Asked by
Vargis
Top achievements
Rank 1
Answers by
Kate
Telerik team
Share this question
or