Arrows for sub-menus move when menu is rendered

[Aleks]

When a vertical menu is rendered, the arrow denoting a sub-menu starts out in the wrong position, left aligned against the menu item text, and then moves to its correct right aligned position.

 

Sometimes this is barely perceivable, but other times is very noticeable, mostly during navigation. See the attached GIF for an example of the issue.

I suspect it has something to do with page resources loading (e.g. CSS).

I am unable to reproduce this with Kendo UI in the Dojo, but this is probably because the menu is not rendered on page load.

It is mostly noticeable in Chrome, but can be seen in Edge and IE (it's difficult to tell with Edge/IE because their rendering in general is terrible).

Code used for the menu:-

@(Html.Kendo().Menu()
    .Name("menu")
    .Orientation(MenuOrientation.Vertical)
    .HtmlAttributes(new
    {
        style = "width: 200px;"
    })
    .Items(items =>
    {
        items.Add().Text("Meters").Action("Index", "Meter").Items(x =>
        {
            x.Add().Text("Create").Action("Create", "Meter");
        });

        items.Add().Text("Meter Groups").Action("Index", "MeterGroup").Items(x =>
        {
            x.Add().Text("Create").Action("Create", "MeterGroup");
        });

        items.Add().Text("Meter Types").Action("Index", "MeterType").Items(x =>
        {
            x.Add().Text("Create").Action("Create", "MeterType");
        });

        items.Add().Text("Messages").Action("Index", "Message");
    })
)

[Neli]

Hi Aleks,

I tested in different browsers in Dojo and in UI for ASP.Net Core project but I did not manage to replicate the described behavior. 

As you suggested the issue might be caused by the late loading of the stylesheet files. It takes time for the CSS to apply to all elements that structure the Menu component.

Could you please try the following approach and test the behavior. You could initially hide the Menu, for example by adding a class and set its style to hidden.

@(Html.Kendo().Menu()
    .Name("menu")
    .Orientation(MenuOrientation.Vertical)    
    .HtmlAttributes(new
     {
         style = "width: 200px;",
         @class = "custom"
     })

And the style:

<style>
    .custom {
        visibility: hidden;
    }
</style>

Then in the document ready function, you could remove the custom class to display the ready Menu component:

<script>
    $(document).ready(function () {
        $("#menu").removeClass("custom");
    })
</script>

Please give a try to this approach and let me know about the behavior.

If the suggested solution does not resolve the issue, could you please send me some more details about your scenario? At what time the Menu is initialized?

Looking forward for your reply.

Regards,
Neli
Progress Telerik

[Aleks]

This bug is caused in part because the k-menu-item class is applied to the li tags by the JavaScript and not as part of the HTML output rendered by the tag helper.

This causes all the menu items to visibly move from the position they are painted on the screen as part of DOM rendering and when the JavaScript has loaded/run.

[Neli]

Hello Aleks,

I have tested again the behavior in UI for ASP.NET Core sample with 2020.2.617 version and with the latest 2021.1.224. I did not manage to replicate the described behavior.

Does the solution I have suggested previously changing the behavior? May I ask you to prepare an isolated runnable sample where the issue is replicated and send it back to us? This way we could take a closer look and provide appropriate assistance. 

Regards,
Neli
Progress Telerik

[Aleks]

Hi.

Yes, your suggestion does hide the bug, however, I wanted to get to the bottom of why it was broken rather than just pretend it's not.

This seems to be a recurring problem with your components. I've had a similar issue with the DropDownList and one of your colleagues directed me to this post where it was acknowledged (by another of your colleagues) nine years ago:

https://www.telerik.com/forums/how-to-fix-the-foucing-menu

The correct fix would be to apply the k-menu-item class.

You can workaround this by adding this to each of the item definitions: HtmlAttributes(new { @class = "k-menu-item" })

Thanks

[Neli]

Hi Aleks,

Could you please confirm if the scripts referenced on your side are placed in the <head> as suggested in the Forum thread regarding FOUC? Do you load some large scripts before loading the Kendo scripts? Do you observe the same behavior if you try to remove the references of the other scripts loaded on the page and use only the Kendo scripts?

Note, that the FOUC behavior could be observed on the page even if no Kendo widgets are used when large script files are registered in the <body> (instead of the <head>). You could read more about FOUC in the links below:

- https://en.wikipedia.org/wiki/Flash_of_unstyled_content 

- https://greensock.com/fouc/

- https://medium.com/@fbnlsr/how-to-get-rid-of-the-flash-of-unstyled-content-d6b79bf5d75f 

 

Regards,
Neli
Progress Telerik