SingleInputRendering and IE8 Compat Mode

[Kevin]

So I have a simple RadWindow setup like so:

<telerik:RadWindow ID="rwCreateChecklist" runat="server" Width="300px" Height="150px"
        Behaviors="Move,Close" Title="Create Checklist" VisibleStatusbar="false" Modal="true">
        <ContentTemplate>
            <div class="wndCreateChecklist">
                <div class="row">
                    <label>
                        Reference Number:</label>
                    <telerik:RadTextBox ID="txtReferenceNumber" runat="server" Width="80px" MaxLength="50">
                    </telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="reqReferenceNumber" runat="server" Text="Required"
                        ValidationGroup="CreateChecklist" ControlToValidate="txtReferenceNumber" SkinID="noFloat"></asp:RequiredFieldValidator>
                </div>
                <div class="button-row">
                    <telerik:RadButton ID="btnCreateChecklist" runat="server" Text="Create Checklist"
                        ValidationGroup="CreateChecklist">
                    </telerik:RadButton>
                    <telerik:RadButton ID="btnCancel" runat="server" Text="Cancel">
                    </telerik:RadButton>
                </div>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>

The issue I'm finding is that the RequiredFieldValidator shows up behind the RadTextBox when viewed in IE8 Compatibility Mode (as shown in attached image). I am using the latest version, so EnableSingleInputRendering is set to true by default.

I've found that the RadTextBox is setting the width of the span element, that the input control is placed in, while applying padding to the input element itself. Why does the control set the width of the span and the input element? When you have this setting turned off, the only element that has it's width set is the input element itself, not the span element.

Is there some reason why both elements have their width property set?

[Vasil]

Hi Kevin,

We are aware of this problem in IE7 (and IE8 compatibility view). There is some workaround that you can apply till we fix this.
Add some custom CSS:

<style type="text/css">
  * + html .customMargin
  {
    margin-right:10px;
  }
</style>

Modify your markup:

<telerik:RadTextBox ID="txtReferenceNumber" runat="server" Width="80px" MaxLength="50" WrapperCssClass="customMargin">
</telerik:RadTextBox>

Since the IE7 does not support the CSS3 box-sizing property, we are using some JavaScript calculation to adjust the width of the input, in order to be the same width as in other browsers.
For example if you set width="100px" for an HTML input element in IE7 it will be wider because of its padding. And we are trying to avoid that.
On the other hand the width is set to the wrapper element for consistency with other ASP controls in which the dimensions are set to the outer element.

All the best,
Vasil
the Telerik team

[Ronny]

Hi,

this behavior still occurs in your current official release 2012.1.411.35. Should this fixed in this version or when we can expect a fix for it?

Thanks,
Ronny

[Steven]

Hi,

I just updated our solution to 2012.1.411.35 and saw this same issue. I'm currently forced to downgrade back to the previous version.

Thanks,
Rich

[Vasil]

Hi Rich,

The JavaScript calculations will work correct if the CSS is already loaded on the page. However in IE7 the styles may load after the control, if it shown with Ajax call on your page.
In this case you should use EnableSingleInputRendering="false", to wrap the input element of the InputControl inside a table. This mean that label will gain it's required length and the rest will stay for the input element, without performing any calculation ClientSide. Additionally the custom styling is still possible approach, so you could embed the styling into skins or just place it into the page.

Greetings,
Vasil
the Telerik team

[Steven]

Thanks for the info.

FYI, I'm experiencing this in IE 9 with compatibility mode on.

Also the control is rendered in a regular render (not Ajax).

The fix described below would still be the proper approach?

Also, do you know if this will be fixed in the next update? I might wait until that update if possible.

Thanks,
Rich

[Vasil]

Hi Rich,

Compatibility mode makes the IE to behave like older version, so there is a great chance when some solution not works in IE7, to not works in IE9 compatibility.
If you don't use Ajax on your page, or window that makes Ajax call to load itself, then you probably experience another similar issue. You could test your project with the beta of Q2 2012 and let us know if you have any issues.

Kind regards,
Vasil
the Telerik team