SingleInputRendering and IE8 Compat Mode

7 posts, 1 answers
  1. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 07 Mar 2012 Link to this post

    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?
  2. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 12 Mar 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ronny
    Ronny avatar
    12 posts
    Member since:
    Apr 2008

    Posted 10 May 2012 Link to this post

    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
  5. Steven
    Steven avatar
    10 posts
    Member since:
    Jun 2011

    Posted 05 Jun 2012 Link to this post

    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


  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 06 Jun 2012 Link to this post

    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
    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.
  7. Steven
    Steven avatar
    10 posts
    Member since:
    Jun 2011

    Posted 06 Jun 2012 Link to this post

    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
  8. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 07 Jun 2012 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017