Controls disappear in IE7

[Tim]

We have a SharePoint web app that is using a few telerik controls. There are 3-4 telerik controls on this particular page. Sometimes when changing a slider bar, or unchecking a checkbox list, the contents of the page disappear. I've looked in to the issue and believe it has to do with the way IE7 handles positioned items. I've changed around to having position: relative, absolute, fixed, none, floating, etc, and I can't get the symptoms to go away.

Here is the code as it stands now.

.scrollingDiv
{
    overflow: auto;
    background-color: #EFEFEF;
    padding: 5px;
}

#HeadToHeadControl
{
    position: relative;
    height: 450px;
    border: 1px solid orange;
}

#FilterControls
{
    width: 250px;
}

#Maturity_Control
{
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid green;
}

#TraitsControl
{
    position: absolute;
    top: 75px;
    left: 10px;
    border: 1px solid blue;
}

#ProductRadioList
{
    position: absolute;
    left: 270px;
    top: 10px;
    width: 300px;
    margin-right: 20px;
    border: 1px solid red;
}
#CompetitorTreeControl
{
    position: absolute;
    top: 10px;
    left: 580px;
    width: 300px;
    border: 1px solid yellow;
}

and

<div id="HeadToHeadControl">
    <telerik:RadAjaxPanel runat="server" ID="ajax1" Width="100%">
        <div id="FilterControls">
            <div id="Maturity_Control">
                radslider
            </div>
            <div id="TraitsControl">
rad checkbox list (I think)
            </div>
        </div>
        <div id="ProductRadioList">
           <asp:Panel runat="server" ID="pnlH2HProductChkList" ScrollBars="Vertical" Height="380px"
                CssClass="scrollingDiv">
radiobuttonlist
            </asp:Panel>
        </div>
        <div id="CompetitorTreeControl">
            <div>
                <asp:Panel runat="server" ID="pnlCompProducts" Visible="false">
                    <div class="scrollingDiv" style='height: 380px;'>
                        <asp:Label ID="lblSelectedProduct" runat="server" Text=""></asp:Label>
rad tree control
                    </div>
                </asp:Panel>
            </div>
            <div style="text-align:right; margin-top:5px;">
                <asp:Button ID="btnH2HResults" runat="server" Text="View Results" Visible="false"
                    OnClick="btnH2HResults_GenerateRpt" />
            </div>
        </div>
    </telerik:RadAjaxPanel>
</div>

Sometimes the issue happens when a SharePoint modal closes, or I'm just checking boxes on a checkbox list, or moving the slider bar. Re-sizing the window makes everything re-appear. I've also tried applying the zoom: 1 property too with no avail.

Can anyone assist me here? I've spent WAY too much time dealing with this bug.

[Dimo]

Hello Tim,

Here is the same answer, which I sent you in the support thread. By the way, submitting a forum thread and a support ticket about the same thing is not recommended, but if you do it, please mention this at both places.


The problem is caused by the buggy IE7 rendering engine. Similar layout proplems occur randomly in some scenarios and depend on specific HTML and CSS code. It is hard to predict how or when such issues will appear.

In your case it seems that redrawing the <div> with ID of "HeadToHeadControl" after showing the modal popup readjust the layout and the controls appear correctly.

In order to redraw an element, you shoud apply or remove some styles from it. For example you can apply a zoom:1 style with Javascript, or set some width or height. You may need to set these with a some timeout after showing the popup.

Here is a page for further reading:

http://www.satzansatz.de/cssd/onhavinglayout.html


Sincerely yours,
Dimo
the Telerik team

[Tim]

Sorry about the duplicates. I completely forgot about submitting a forum thread.

I tried applying a width to the #HeadToHeadControl via the document.ready function. This applied the width, but only on initial page load. Since the controls are sitting in an Ajax panel, it didn't appear that it was re-applying the style (correct me if I'm wrong). 

So on the RadAjaxPanel, I set this property to run.

ClientEvents-OnResponseEnd="AjaxResponseEnd"

function AjaxResponseEnd(sender, args) {
        $('#HeadToHeadControl').css('zoom', '1');
    }

And it works! My controls no longer jump around. I had tried forcing 'hasLayout' in quite a few different ways, but your suggestion of running it on a delay lead me to the 'OnResponseEnd'. 

I did run in to a new issue though. Whenever I make any changes to the slider or 'Traits' checkbox, then select an item from the bulleted list, I end up with a Javascript error.

Sys.ArgumentUndefinedException: Sys.ArgumentUndefinedException: Value cannot be undefined.
Parameter name: type
Sys$Component$create/ScriptResource.axd?d=48qqFi8awXRT1nFF7gY-I76hWOS7s5EOTatHKickU4mKkKO1QUE4MyQuOqfdQDxZ3rWnYwJhJ4iM3mPg0f8-gd4oKIpImWZ7anAxFbUDY0I1&t=ffffffffec2d9970:2705
(anonymous function)Head-to-Head%20Plots.aspx:4

I viewed this file with Chrome, and here is the function that this error is contained in (note the commented line which is what the browser is erroring on.

var $create = Sys.Component.create = function Sys$Component$create(type, properties, events, references, element) {
    /// <summary locid="M:J#Sys.Component.create" />
    /// <param name="type" type="Type"></param>
    /// <param name="properties" optional="true" mayBeNull="true"></param>
    /// <param name="events" optional="true" mayBeNull="true"></param>
    /// <param name="references" optional="true" mayBeNull="true"></param>
    /// <param name="element" domElement="true" optional="true" mayBeNull="true"></param>
    /// <returns type="Sys.UI.Component"></returns>
    var e = Function._validateParams(arguments, [
        {name: "type", type: Type},
        {name: "properties", mayBeNull: true, optional: true},
        {name: "events", mayBeNull: true, optional: true},
        {name: "references", mayBeNull: true, optional: true},
        {name: "element", mayBeNull: true, domElement: true, optional: true}
    ]);

    if (e) throw e;  ///This is the line with the error///
    if (!type.inheritsFrom(Sys.Component)) {
        throw Error.argument('type', String.format(Sys.Res.createNotComponent, type.getName()));
    }

    if (type.inheritsFrom(Sys.UI.Behavior) || type.inheritsFrom(Sys.UI.Control)) {
        if (!element) throw Error.argument('element', Sys.Res.createNoDom);
    }

    else if (element) throw Error.argument('element', Sys.Res.createComponentOnDom);
    var component = (element ? new type(element): new type());
    var app = Sys.Application;
    var creatingComponents = app.get_isCreatingComponents();
    component.beginUpdate();

    if (properties) {
        Sys$Component$_setProperties(component, properties);
    }

    if (events) {
        for (var name in events) {
            if (!(component["add_" + name] instanceof Function)) throw new Error.invalidOperation(String.format(Sys.Res.undefinedEvent, name));

            if (!(events[name] instanceof Function)) throw new Error.invalidOperation(Sys.Res.eventHandlerNotFunction);
            component["add_" + name](events[name]);
        }
    }

    if (component.get_id()) {
        app.addComponent(component);
    }

    if (creatingComponents) {
        app._createdComponents[app._createdComponents.length] = component;
        if (references) {
            app._addComponentToSecondPass(component, references);
        }

        else {
            component.endUpdate();
        }
    }

    else {
        if (references) {
            Sys$Component$_setReferences(component, references);
        }
        component.endUpdate();
    }

    return component;
}

[Tim]

As an additional note to the above, the JS error happens in IE7, but not IE8. If I switch out the RadAjaxPanel for an asp:UpdatePanel, the error no longer happens in IE7, but happens in IE8.

[Dimo]

Hi Tim,

I can't currently open your web application, but generally, there is a problem in SharePoint 2010 related to showing script controls (ASP.NET AJAX controls) after an AJAX request - their Javascript files do not load, that's why the Type is null during the controls' initialization ($create() method). We are not aware of any workarounds so far - you must keep all script controls visible on the page (you can hide them with CSS).

Greetings,
Dimo
the Telerik team

[Tim]

Spot on again. When the javascript error came about, was when the page was trying to display a RadTreeControl, which was sitting inside of an asp:panel, which was initially hidden.

Thank you!

For anyone curious, here's what I did to make it work:
-Set my Panel to visible, commented out any code-behind that was changing it's visible property
-In the code behind, I replaced my Panel.Visible = True/False with this:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "hideCompTree", "HideCompTree();", true);
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "showCompTree", "ShowCompTree();", true);

Then, in my markup, using jQuery, I'm showing/hiding the div that wraps around the control I want to hide.

<script type="text/javascript">
    function HideCompTree() {
        $('#CompetitorTreeControl').css('display', 'none');
    }
    function ShowCompTree() {
        $('#CompetitorTreeControl').css('display', 'inline');
    }
</script>

Thanks again!