RadMenuItem offsetTop wrong in IE9

3 posts, 0 answers
  1. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 25 Sep 2013 Link to this post

    I have a vertical RadMenu on my page who's button clicks bring up popup windows.

    We have a little formula that determines the placement of each window (just to the right of the button clicked), but on IE9, the offsetTop value for the menu item element is off by 60, which pushes down our window lower than we want.  Other browsers display it fine.

    Any ideas why?  Here's the menu:
    <telerik:RadMenu ID="RadMenu1" runat="server" flow="Vertical" Width="100%" OnClientItemClicked="MenuOpenWindow('RadWindow1')">
        <Items>
            <telerik:RadMenuItem ImageUrl="../Images/button.png" Value="RadWindow1"  />
        </Items>
    </telerik:RadMenu>

    And Javascript:
    function MenuOpenWindow(windowTitle) {
        var oWindow;
        var offsetElementBounds;
        var menu = $find("<%=RadMenu1.ClientID%>");
        var menuItem = menu.findItemByValue(windowTitle).get_element();
     
        if (windowTitle == "RadWindow1") {
            if (lastWindowTitle != "RadWindow1") {
                oWindow = $find("<%=winRadWindow1.ClientID%>");
                oWindow.show();
                if (oWindow.get_offsetElementID()) {
                    offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
                    var x = parseInt(offsetElementBounds.x + (menuItem.offsetWidth / 3));
                    var y = parseInt(menuItem.offsetTop + offsetElementBounds.y - (menuItem.offsetHeight / 3));
                    alert(menuItem.offsetTop);
                    alert(offsetElementBounds.y);
                    alert(menuItem.offsetHeight);
                    alert(x);
                    alert(y);
                    oWindow.moveTo(x, y);
                }
                return false;
            }
        }
    }
  2. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 30 Sep 2013 Link to this post

    Hello Amanda,

     
    I have inspected the described scenario but could not observe any difference in the behavior in IE and the other browsers.

    I am attaching my test web page that is based on your code and here is a video of my test. Please review them and let me know if your scenario is somehow different of if you have further questions.

    I have noticed that in your code the OnClientItemClicked event is not hooked properly so I will recommend you to see how we recommend adding client events to RadControls as in the code attached.

    Regards,
    Plamen
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 25 Oct 2013 Link to this post

    Plamen,

    I apologize for this late, late reply.

    The reason you couldn't observe any difference is probably because you weren't hitting the CSS limit for IE 9.  Don't ask me to explain it, because I'm not sure...  But as soon as we fixed our loading of style sheets for IE 9, the window locations were right.

    I'm just grateful we found the fix!  I appreciate that you responded though, and hope you have a Happy Halloween!
Back to Top