radMenu root elements shift position slightly during flyin/flyout animations

5 posts, 1 answers
  1. Adam
    Adam avatar
    5 posts
    Member since:
    Aug 2018

    Posted 17 Aug 2018 Link to this post

    I'm using Telerik controls in a legacy application that is forced to run in IE Compatibility Mode.  I'm using version 2015.2.826.40, as my understanding is that later versions don't support Compatibility Mode.

    What I've noticed is that with this version, the root nodes on a radMenu are shifting slightly during animation.

    I have a small video of the process:

    https://youtu.be/lHO2EJO5HqQ

    Any ideas on where I should start looking to try to debug or solve this issue?  By the way, changing the browser out of Compatility Mode solves the issue completely... the menu looks great.  But unfortunately that's not an option at this point.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4941 posts

    Posted 20 Aug 2018 Link to this post

    Hello Adam,

    It looks like the animation container gets a 1px height and/or border while animating and that's what causes the items around it to move a little.

    The best I can offer is that you try pausing a debugger in the OnClientItemOpening and OnClientItemOpened events to see if you can inspect the DOM and find which element it is (it is likely that IE will not allow that, unfortunately, and you may need to manually walk through the tree in the DOM explorer and expand nodes to find the one you are looking for, and hope it would have updated the values). Perhaps with this you could then devise a CSS rule that will remove this border or height (or whatever other property it is) without breaking the menu appearance.

    You can also try disabling animations to see if this helps.

    Here is a basic example that you can use as base for comparison and investigation

    <telerik:RadMenu runat="server" ID="rm1" OnClientItemOpened="function(){debugger;}" RenderMode="Classic" Flow="Vertical" Skin="Telerik">
        <ExpandAnimation Type="None" />
        <CollapseAnimation Type="None" />
        <Items>
            <telerik:RadMenuItem Text="first">
                <Items>
                    <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="two"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="second">
                <Items>
                    <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="two"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="first">
                <Items>
                    <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="two"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Adam
    Adam avatar
    5 posts
    Member since:
    Aug 2018

    Posted 20 Aug 2018 in reply to Marin Bratanov Link to this post

    Thanks!  I've found that disabling the Collapse Animation pretty much fixed the issue.  And I can live without the Collapse Animation.

    The text still jumps around a little, so I might continue down that path.  

  4. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4941 posts

    Posted 21 Aug 2018 Link to this post

    It's good to hear this is going well, Adam. I hope this either suffices, or you manage to find an improvement. Actually, I hope you can soon move to standards mode and stop having to support IE7 :)
    --Marin
  5. Adam
    Adam avatar
    5 posts
    Member since:
    Aug 2018

    Posted 21 Aug 2018 in reply to Marin Bratanov Link to this post

    I know!  The point of my upgrading to Telerik controls is to get away from some legacy stuff that is locking us into Compatibility Mode.

    Thanks again for your help!

Back to Top