We are using RadTextBox and specifying the text box widths, but in IE 7 Standards Mode the input widths are not enforced, resulting in very small input boxes (approx. 30px wide). How can this be fixed?
Below is one example:
<telerik:RadTextBox Width=""300px"" produces this HTML:
<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=""""/>
Note the span tag has a style with width 300px. The span wraps an input tag with a width of 100% and a size of 20... We assume the width 100% means the input width will stretch to fit the 300px wide span tag. This works in IE 8 Standards Mode but not in IE 7 Standards Mode. Not sure why the size="20" is in there but it doesn't seem to have an effect.
Since the input's width 100% is specified as an in-line style, it can't be overridden from the css file even when using !important. #tbTestGroupName [style] {width:300px !important;} in the css file for overriding the in-line style is supported in IE 8, but not IE 7.
Also, we are using the transitional doctype (see below). Should this doctype be different?
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
Any help would be much appreciated as we're on a tight deadline. =(
Below is one example:
<telerik:RadTextBox Width=""300px"" produces this HTML:
<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=""""/>
Note the span tag has a style with width 300px. The span wraps an input tag with a width of 100% and a size of 20... We assume the width 100% means the input width will stretch to fit the 300px wide span tag. This works in IE 8 Standards Mode but not in IE 7 Standards Mode. Not sure why the size="20" is in there but it doesn't seem to have an effect.
Since the input's width 100% is specified as an in-line style, it can't be overridden from the css file even when using !important. #tbTestGroupName [style] {width:300px !important;} in the css file for overriding the in-line style is supported in IE 8, but not IE 7.
Also, we are using the transitional doctype (see below). Should this doctype be different?
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
Any help would be much appreciated as we're on a tight deadline. =(
1 Answer, 1 is accepted
0
Hello Steve,
As I see you are using RadFormDecorator to decorate the RadTextBox. This is a known bug and can be resolved if you disallow the RadFormDecorator to decorate the RadTextBox. Additionally you should know that our team of developers will resolve this issue as soon as possible. We apologize for any inconvenience caused.
Kind regards,
Angel Petrov
the Telerik team
As I see you are using RadFormDecorator to decorate the RadTextBox. This is a known bug and can be resolved if you disallow the RadFormDecorator to decorate the RadTextBox. Additionally you should know that our team of developers will resolve this issue as soon as possible. We apologize for any inconvenience caused.
Kind regards,
Angel Petrov
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.