RadWindow + IFrame Positioning in IE

[Katie]

Looking for some positioning/z-index guidance on the RadWindow. I've played around for probably too much time and haven't budged a thing so I'm hoping an expert can speed me along.

We have a page with multiple user controls and a ton of Rad items (grids, comboboxes, windows, oh my!). In multiple places we are using RadWindows to pop up attachment selection, searches, etc. These RadWindows are not playing well with an Iframe that is a document preview. The RadWindow is appearing partially behind (or fully behind in some cases) an Iframe doc preview when the file type is unsupported (which is just a white box, since the file in question was opened/saved to the native desktop). This is only happening in IE.

The fact that it is only happening in IE and that IE handles z-indexes differently really leads me to believe I'm not handling the z-index correctly. I've attached two example images. Both of these have a large white box in the document preview area because I have chosen a file of type .docx. The first image shows a fully blocked RadWindow. The second a partially blocked RadWindow.

Z-index of fully blocked: 3001
Z-index of partially blocked: 3005

Any advice (even of a non z-index variety) would be greatly appreciated. Thanks!

[Marin Bratanov]

Hi Katie,

What is the content of that frame? If it is some control (active-x or silverlight, for example) it would be nornal for the RadWindow to be shown behind it. This is explained here: http://www.telerik.com/support/kb/aspnet-ajax/window/details/control-is-shown-behind-a-heavy-weight-object-(pdf-flash-activex-etc).
If setting Overlay to true does not help I would advise posting your code so we can observe the problem.
In the meantime I would advise making sure your page does not have JavaScript errors.


Regards,
Marin Bratanov
Telerik

[Katie]

Hi Marin,

Thank you for the advice - this ALMOST fixes the problem. The overlay = "true" does show the full window sometimes. But it's also really...blinky. I don't know how else to describe it. If I could, I'd attach some kind of video of it. When the RadWindow opens, it opens correctly. But then, as I move my mouse around (just mouse movement, nothing else) it blinks between visible and invisible. Front and then back. I've attached two more images. One of how it looks on load (better! correct!). One of how it looks the minute I move my mouse. Then when I stop moving, back to the first image. Repeat.

As for code - this is bunch of user controls on the page, so it's hard to know what to post (because it would be impossible to post all of the code/html). I really think the main issue is IE's handling of Iframes. So the "blocking" Iframe that is causing the problems is actually empty in IE's eyes. Basically we are loading a docx in to the iframe, the iframe is asking you to download the document, and the iframe itself is nothing. Code wise, that means the iframe is showing up like this:

<iframe name="iframe_a" width="100%" height="600" class="imageIframe" id="ctl00_m_g_949c74e4_4d79_4053_a4b7_abbe2225afe9_ctl00_rpbServiceRequestDocPreview_i0_iframeAttachment" src="/Lists/ATDAttachment/24a8668e-f280-4806-a465-448f70723f43_ad8a0344-a05e-4fe9-a6cf-301e1e562ba4_9d933422-7e0c-4562-9634-8bd3839641b7_Test 1.docx"/>

What else would you like to see? The RadWindow itself looks like:

<telerik:RadWindow ID="rwAddAttachment" runat="server" Width="365px" ReloadOnShow="true"
                OnClientClose="EnableAttachmentSave" Height="400px" Overlay="true">
                <ContentTemplate>
                    <div style="overflow-x: hidden">
                        <p>
                            <strong>Add Attachment</strong></p>
                        <asp:Panel runat="server" ID="pnlAttachmentType">
                            <p class="fl">
                                Attachment Type</p>
                            <telerik:RadComboBox ID="rcbAttachment" CssClass="margin-10" runat="server" OnClientSelectedIndexChanged="rcbAttachment_SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Local Drive" Value="1" Selected="True" />
                                    <telerik:RadComboBoxItem Text="DMS Search" Value="0" />
                                    <telerik:RadComboBoxItem Text="Forms" Value="2" />
                                </Items>
                            </telerik:RadComboBox>
                        </asp:Panel>
                        <div id="divLocalDrive">
                            <p>
                                Upload</p>
                            <telerik:RadAsyncUpload runat="server" ID="rauAttachments" HttpHandlerUrl="~/_layouts/XXXX/Handler/handler.ashx"
                                MultipleFileSelection="Automatic" Width="415px" OnFileUploaded="rauAttachments_FileUploaded"
                                OnClientFileUploadFailed="HandleFileUploadFailed" OnClientFileUploading="DisableAttachmentSave"
                                OnClientFilesUploaded="EnableAttachmentSave">
                            </telerik:RadAsyncUpload>
                            <telerik:RadButton ID="rbSave" runat="server" Text="Save" AutoPostBack="False" OnClientClicked="AddAttachmentsClient"
                                CausesValidation="False" />
                            <telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" AutoPostBack="False"
                                OnClientClicked="AddAttachmentClose" />
                            <asp:HiddenField ID="hdnType" runat="server"></asp:HiddenField>
                            <div style="color: red; padding-top: 10px;">
                                * The attachment name must not contain any of the specified characters: ~ # % &
                                * { } | \: " < > ? / −
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadWindow>

[Marin Bratanov]

Hi Katie,

This behavior is rather odd. If Overlay=true lets the RadWindow show up over hte elements that hid it previously, then it is very likely that some of these elements is heavy (pdf, activeX, flash, java, silverlight), as explained in the article I linked. Can you check and confirm if this is the case? If so, you can try toggling the windowless property of the object tag, but this may cause some issues with the object itself (e.g., degrade performance/appearance).

If this is not the case and indeed only an iframe remains over the RadWindow, I can suggest simply hiding the iframe, for example:

    iframe[src*=docx]
    {
        display: none;
    }
</style>

so that it does not stay above the RadWindow, consume the mouse events and cause flickering.

If this is, indeed, the case, I am afraid that much more could not be done, because the problem would be between IE and iframes, i.e. the way the browser renders and handles them, and this is not something we can change.

Regards,
Marin Bratanov
Telerik