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

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

2 Answers 92 Views

SkinManager

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

Vargis asked on 30 Jun 2012, 05:52 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.

Thanks in Adv

2 Answers, 1 is accepted

answered on 04 Jul 2012, 09:13 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

2 Answers, 1 is accepted