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

RadTextBox Resizing

11 Answers 229 Views
This is a migrated thread and some comments may be shown as answers.
Su
Top achievements
Rank 1
Su asked on 23 Mar 2012, 03:48 PM
I have a RadTextBox control set up as

<telerik:RadTextBox ID ="Test" runat="server"
      EmptyMessage="Please enter subject search text...">
</telerik:RadTextBox>

Width property  is not declared in the markup, The textbox is resizing properly using the javascript but the span wrapper class is always set to 160px width. It has caused us a few issues in our project.  Is there anyway to remove the inline-style width?

We are using  Q1 2012 version.


<span style="width: 160px;" id="ctl00_SearchPagePaneContent_txtSearchSubject_txtTextBox_wrapper"
 
    class="riSingle RadInput RadInput_Office2007">
 
 .
 
 .

</span>


11 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 28 Mar 2012, 07:32 AM
Hi Su,

I tested it here and the input remains 160 pixels wide. The input and the upper span both have the same width.
Do  you use some additional custom styling? In which browser you are testing?

Greetings,
Vasil
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.
0
Chamin
Top achievements
Rank 1
answered on 22 May 2012, 12:43 PM

I also have this issue when I create text box without giving value to Width property. But I try to set width value by CSS class. Actually I’m creating this text box by dynamically on run time as follows,

NewControl = New RadTextBox With {.AutoPostBack = True, .CssClass = "txtbox"}

CSS class,

.txtbox
{
   background: url("images/text-box-bg.png") no-repeat !important;
    width:193px !important;
    height:29px !important;
    padding-left:5px !important;
    font-size:14px !important;
    padding-top:0px !important;
    line-height:17px !important;
    border:0px !important;
    margin-bottom:7px !important;
     
     
}

But when I looked the page after rendered as follows,

<span id="ctl00_MainContentPlaceHolder_incPanelBar_i2_i0_i2_incPanelBar-ZIP_wrapper" class="riSingle RadInput RadInput_Default" style="width: 160px;">
<span id="ctl00_MainContentPlaceHolder_incPanelBar_i2_i0_i2_incPanelBar-ZIP_display" class="riDisplay" style="display:none;"></span>
<input id="ctl00_MainContentPlaceHolder_incPanelBar_i2_i0_i2_incPanelBar-ZIP" class="riTextBox riEnabled txtbox" type="text" size="20" name="ctl00$MainContentPlaceHolder$incPanelBar$i2$i0$i2$incPanelBar-ZIP">
<input id="ctl00_MainContentPlaceHolder_incPanelBar_i2_i0_i2_incPanelBar-ZIP_ClientState" type="hidden" name="ctl00_MainContentPlaceHolder_incPanelBar_i2_i0_i2_incPanelBar-ZIP_ClientState" autocomplete="off">
</span>

And also see some unwanted styles created on run time as follows,

.riSingle, .riSingle .riTextBox, .riSingle .riContentWrapper, .riSingle .riDisplay {
    -moz-box-sizing: border-box;
}

Please guide us to eliminate these issues.







0
Vasil
Telerik team
answered on 24 May 2012, 02:48 PM
Hi Chamin,

As you can see the "txtbox" is correctly added in the Class of the visible input element.
If you need to add class to the wrapper of the control, use the WrapperCssClass property. Additionally you may test your code with the Q2 2012 Beta and tell us if you have any troubles.

Greetings,
Vasil
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.
0
Balakrishnan R
Top achievements
Rank 1
answered on 18 Jun 2012, 07:46 AM
Hi,

I have problem with RadTextBox - width property, while setting width it applies to outer span tag not actual input tag, problem raise when i dynamically insert span after the input tag,  generated code RadControls for ASP.NET AJAX Q2 2012

<span style="width: 350px;" class="riSingle RadInput RadInput_Grey" id="ctl00_ctl00_ctl00_cphHeader_cphApps_cphContent_uctrlRecordCreation_rtxtTitle_wrapper">
<
input type="text" class="riTextBox riEnabled" maxlength="80" size="20" name="ctl00$ctl00$ctl00$cphHeader$cphApps$cphContent$uctrlRecordCreation$rtxtTitle" id="ctl00_ctl00_ctl00_cphHeader_cphApps_cphContent_uctrlRecordCreation_rtxtTitle" style="padding-left: 5px;">
<
span title="Remaining letters 80" class="counter">80</span>
<
input type="hidden" name="ctl00_ctl00_ctl00_cphHeader_cphApps_cphContent_uctrlRecordCreation_rtxtTitle_ClientState" id="ctl00_ctl00_ctl00_cphHeader_cphApps_cphContent_uctrlRecordCreation_rtxtTitle_ClientState" autocomplete="off" value="{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":""}">
</
span>

<
span style="display:none;" class="errorDot" id="cphHeader_cphApps_cphContent_uctrlRecordCreation_RequiredFieldValidator1">* Required </span>
the problem not with previous release. generated code
<span style="white-space: nowrap;" class="RadInput RadInput_Grey" id="ctl00_ctl00_ctl00_cphLogo_cphMenu_cpContent_rtxtTitle_wrapper">
<
input type="text" style="width: 350px; padding-left: 5px;" class="riTextBox riEnabled" name="ctl00_ctl00_ctl00_cphLogo_cphMenu_cpContent_rtxtTitle_text" id="ctl00_ctl00_ctl00_cphLogo_cphMenu_cpContent_rtxtTitle_text" size="20" maxlength="80">
<
span title="Remaining letters 80" class="counter">[80]</span>
<
input type="text" value="" style="visibility:hidden;margin:-18px 0 0 -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" title="" class="rdfd_" name="ctl00$ctl00$ctl00$cphLogo$cphMenu$cpContent$rtxtTitle" id="ctl00_ctl00_ctl00_cphLogo_cphMenu_cpContent_rtxtTitle"><input type="hidden" name="ctl00_ctl00_ctl00_cphLogo_cphMenu_cpContent_rtxtTitle_ClientState" id="ctl00_ctl00_ctl00_cphLogo_cphMenu_cpContent_rtxtTitle_ClientState" autocomplete="off"></span>
<span style="color:Red;visibility:hidden;" id="ctl00_ctl00_ctl00_cphLogo_cphMenu_cpContent_RequiredFieldValidator1">* Required </span>

how can i  remove inline style applied to outer span & apply it to input tag
0
Vasil
Telerik team
answered on 18 Jun 2012, 08:38 AM
Hello Balakrishnan,

This behaviour was changed previously in Q1 2012, because we get a lot of request about unifying width of the controls. So the width is applied to the wrapper now. This was firstly enabled in EnableSingleInputRendering only and later in both modes.

For a solution you can style your inputs with CSS instead of placing inline styles.

Greetings,
Vasil
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.
0
Balakrishnan R
Top achievements
Rank 1
answered on 18 Jun 2012, 09:40 AM
Thanks Vasil, I will try
0
Balakrishnan R
Top achievements
Rank 1
answered on 21 Jun 2012, 06:24 AM
Hi Vasil,

I have faced another problem with RadTextBox, used jquery to get RadTextBox value in client side like

var $textbox = $("<%= RadTextBox1.ClientID %>_text");
var result = $textbox.val()

 it was working with previous version, but now  it is not working .
0
Vasil
Telerik team
answered on 21 Jun 2012, 08:16 AM
Hello,

Use it like:

var $textbox = $("<%= RadTextBox1.ClientID %>");

Just remove the "_text"

Regards,
Vasil
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.
0
Balakrishnan R
Top achievements
Rank 1
answered on 21 Jun 2012, 08:24 AM
Hi,
But without _text previous version will not work.
have to update for new version Only ?
0
Vasil
Telerik team
answered on 21 Jun 2012, 08:33 AM
Hi Balakrishnan,

Yes in Q2 2012 the visible input HTML element always have the same ID as the ClientID of the RadInputControl.

In Q3 2011 and older, you have to use "_text" to access the visible input element.
In Q1 2012, you have to use the client ID without suffix in case EnableSingleInputRendering="true" (by default), or to add "_text" suffix if EnableSingleInputRendering="false".
In Q2 2012 and later in both rendering modes there is only one visible input.

Greetings,
Vasil
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.
0
Balakrishnan R
Top achievements
Rank 1
answered on 21 Jun 2012, 08:43 AM
Thanks vasil.
Tags
Input
Asked by
Su
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Chamin
Top achievements
Rank 1
Balakrishnan R
Top achievements
Rank 1
Share this question
or