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

RadTextBox width not sticking

10 Answers 176 Views
Input
This is a migrated thread and some comments may be shown as answers.
Clarence Klopfstein
Top achievements
Rank 1
Clarence Klopfstein asked on 21 Jan 2009, 04:13 PM
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.







10 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Jan 2009, 04:28 PM
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.
0
Clarence Klopfstein
Top achievements
Rank 1
answered on 21 Jan 2009, 04:45 PM
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.
0
Dimo
Telerik team
answered on 21 Jan 2009, 04:52 PM
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.
0
Jon
Top achievements
Rank 1
answered on 17 Apr 2009, 02:13 PM
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

 

0
Steve
Top achievements
Rank 1
answered on 05 Nov 2012, 02:57 PM
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.  =(

0
Sonia
Top achievements
Rank 1
answered on 17 Oct 2013, 08:04 AM
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.
0
Shinu
Top achievements
Rank 1
answered on 17 Oct 2013, 09:43 AM
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.
0
Sonia
Top achievements
Rank 1
answered on 18 Oct 2013, 10:43 AM
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.
0
Shinu
Top achievements
Rank 1
answered on 18 Oct 2013, 12:19 PM
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.
0
Sonia
Top achievements
Rank 1
answered on 23 Oct 2013, 07:33 AM
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;

}
Tags
Input
Asked by
Clarence Klopfstein
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Clarence Klopfstein
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Sonia
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or