Maintaining textbox pixel width with RadInputManager in UI for ASP.NET AJAX Input

Kevin Cabritit

20 posts

Member since:
Sep 2009

Posted 13 Apr 2010 Link to this post

I am attempting to use the RadInputManager on a form. This form consists of about 10 regular textboxes and a RadInputManager.

Some of the textboxes are larger than others. They have been applied a particular css style, either 'form25' or 'form50', which define a width in pixels.

When rendering the page, RadInputManager converts the textboxes and the style is replaced, making all textboxes the same width.

I have attempted to override the style using 'html body form .RadInputMgr_Simple .form50' as the css tag, but am not having any luck. I have read the blog post regarding overriding styles and specificity, but am unable to get this working.

Please tell me how I can go about doing this. There are hundreds of textbox controls through this site and I'd like to maintain their width while taking advantage of the RadInputManager functionality.

Thanks.

Kevin Cabritit

20 posts

Member since:
Sep 2009

Posted 15 Apr 2010 Link to this post

*bump*

Can anyone help?

Maria Ilieva

Admin

4017 posts

Posted 15 Apr 2010 Link to this post

Hello Alex,

Thank you for contacting us and for your question.

Possible solution for your issue could be to set css class for a particular TextBox setting in the RadInputManager settings and not in the TextBox directly. RadInputManager settings contain the necessary css properties which could be used ( DisabledCssClass, EmptyMessageCssClass, EnabledCssClass, FocusedCssClass, HoveredCssClass, ReadOnlyCssClass).

Let us know if this helps and if further assistance is needed.

Best wishes,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Kevin Cabritit

20 posts

Member since:
Sep 2009

Posted 15 Apr 2010 Link to this post

Thanks for the reply.

I have experimented with using these CSS tags, however to implement these retroactively will take forever.

Take this for example:

    
                                                        <telerik:RadInputManager ID="RadInputManager1" runat="server"> 
        
                                                            <telerik:TextBoxSetting Validation-IsRequired="True" BehaviorID="RequiredFields"> 
        
                                                                <TargetControls> 
        
                                                                    <telerik:TargetInput ControlID="Password" /> 
        
                                                                    <telerik:TargetInput ControlID="UserName" /> 
        
                                                                    <telerik:TargetInput ControlID="ConfirmPassword" /> 
        
                                                                    <telerik:TargetInput ControlID="Address1" /> 
        
                                                                    <telerik:TargetInput ControlID="Email" /> 
        
                                                                    <telerik:TargetInput ControlID="City" /> 
        
                                                                    <telerik:TargetInput ControlID="PostCode" /> 
        
                                                                    <telerik:TargetInput ControlID="State" /> 
        
                                                                    <telerik:TargetInput ControlID="PhoneNumber" /> 
        
                                                                    <telerik:TargetInput ControlID="Answer" /> 
        
                                                                    <telerik:TargetInput ControlID="Name" /> 
        
                                                                </TargetControls> 
        
                                                                <Validation IsRequired="True" /> 
        
                                                            </telerik:TextBoxSetting> 
        
                                                            <telerik:TextBoxSetting Validation-IsRequired="False" BehaviorID="NotRequiredFields"> 
        
                                                                <TargetControls> 
        
                                                                    <telerik:TargetInput ControlID="Address2" /> 
        
                                                                </TargetControls> 
        
                                                            </telerik:TextBoxSetting> 
        
                                                        </telerik:RadInputManager>

There's a few textbox fields here, some are small, some are large.

Right now, all I need to do is to define which are required fields and which are not.

To implement CSS tags would result in 4 times the amount of configuration here.

Surely there's a way to override with a global css change?

Maria Ilieva

Admin

4017 posts

Posted 19 Apr 2010 Link to this post

Hello Alex,

Currently the best option for your scenario could be to define particular width to a container which contains several text boxes. In this way it will not be necessary to define this setting for each input control. For example:

<%@ Page Language="C#" %>

<%@ 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 runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

.width50 .RadInputMgr

{

width:50px;

}

.width150 .RadInputMgr

{

width:150px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadInputManager ID="RadInputManager1" runat="server">

<telerik:TextBoxSetting>

<TargetControls>

<telerik:TargetInput ControlID="TextBox1" />

<telerik:TargetInput ControlID="TextBox2" />

</TargetControls>

</telerik:TextBoxSetting>

</telerik:RadInputManager>

<span class="width50">

<asp:TextBox ID="TextBox1" runat="server" />

</span>

<span class="width150">

<asp:TextBox ID="TextBox2" runat="server" />

</span>

</form>

</body>

</html>

Let us know if this helps.

All the best,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.