RadTextBox width not sticking

[Clarence Klopfstein]

I have the following Control:
<telerik:RadTextBox ID="txtSoldTo" runat="server" EmptyMessage="Enter Sold To Person" CssClass="txtSoldTo">
    </telerik:RadTextBox>

Then I have the following CSS:
.txtSoldTo
{
    position: relative;
    top: -155px;
    left: 250px;
    float: left;
    width: 100px;
}

The width is not working.  How do I set the width via CSS?  I notice when I look at the markup on the served page that I see the 'size' as 20.

[Dimo]

Hi Clarence,

Due to the RadTextBox rendering, behavior and features, the ability to set width with external CSS is limited. Please set it declaratively in the control server tag (you can use ASP.NET themes for this as well).

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Clarence Klopfstein]

Then I highly recommend taking the time to fix this issue.  When you are trying to develop skinnable things by CSS (which web folks certainly understand) then CSS needs to be able to set basic settings like... width.

[Dimo]

Hello Clarence,

We will implement the ability to set width to the textbox with CSS for some of the next versions of the control. One additional property will need to be set in order to make this work.

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

or as I just discovered do it as below....

.textbox

 

{width:300px ! important;}

A nice workaround for the time being,  when they've fixed it just remove the ! important....

Cheers,

Jon

 

[Steve]

We have encountered a similar problem in IE 7 (working in IE 7 Standards Mode), where the set width of the text box is not working, even when the width is set in the RadTextBox tag. The width of the text box is set to 300px, but in IE 7 standards mode the text box is tiny and not respecting the width (see attached screenshot).

 <telerik:RadTextBox Width="300px" ....    produces:

 <span class="riSingle RadInput RadInput_Vista" id="tbTestGroupName_wrapper" style="width: 300px;">

<input name="rdCreateNewTestGroup$C$tbTestGroupName" tabIndex="301" class="riTextBox riEnabled rfdDecorated" id="tbTestGroupName" style="width: 100%;" type="text" size="20" _events="[object Object]" control="[object Object]" RadInputValidationValue=""/>            


So the span sets width to 300px, and the input within the span sets its width to 100%, which would make it stretch to 300px, but not in IE 7 standards mode. 

We can't override the input's width:100% style because it's inline, and in-line styles can't be overridden from a class in the .css file in IE 7.

The application we're developing is using the following doctype:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"


Any help you can give would be much appreciated as we're on a tight deadline.  =(

[Sonia]

Hi,
I am experimenting the same problem as Steve in IE9.
Althought i change RadTextbox width it is not affecting the size of the input but the span containing that.

[Shinu]

Hi Sonia,

RadTextBox is rendered as a combination of input control inside a span element. So if you are setting Width="400px" for the RadTextBox, when the control is rendered on the screen the span element will have a width of 400px and input width will be 100% (Means 100% of the width of span which will be equal to 400px).

Thanks,
Shinu.

[Sonia]

Hi Shinu,
this asp.net code

<telerik:RadTextBox ID="Goal_Weight" runat="server" Width="50px"></telerik:RadTextBox>

is translated into

<span class="riSingle RadInput RadInput_Office2010Silver" id="ctl00_MainContent_RadWindow_AddGoal_C_Goal_Weight_wrapper" style="width: 50px;">

<input name="ctl00$MainContent$RadWindow_AddGoal$C$Goal_Weight" tabIndex="0" class="riTextBox riEnabled" id="ctl00_MainContent_RadWindow_AddGoal_C_Goal_Weight" type="text" size="20" value="" />

</span>

as you can see input size is 20 and the consequence is that input size is much bigger than span width.
Any idea on how to manage that input text is rendered with the desired size indicated in the radtextbox?
thank you,
Sonia.

[Shinu]

Hi Sonia,

The size attribute specifies the width of an <input> element, in characters and the default value is 20 which you are getting in the rendered html. The size attribute is not a precise method of sizing - it refers to the number of characters the field will be able to display at once. The css style "width" will override the size attribute in browsers that support CSS and make the field the correct width, and for those that don't, it will fall back to the specified number of characters.

If you examine the CSS of the <input> carefully you can find the following style which indicates that the width of input will be always 100% of the width of span (means input will have the same width as that of the span).

html body .riSingle .riTextBox[type="text"]
{
    width: 100%;
}

Hope this helps,
Shinu.

[Sonia]

Hi Shinu,

In my opinion this behaviour should be achieved by setting width on the RadTextBox. In other case, this property has no sense or it is incomplete.

Anyway i have solved it by setting the css you proposed as important.

html body .riSingle .riTextBox[type="text"]

{

    width: 100% !important;

}