This is a migrated thread and some comments may be shown as answers.

Arrows for sub-menus move when menu is rendered

5 Answers 18 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Aleks
Top achievements
Rank 1
Veteran
Aleks asked on 05 Jun 2020, 06:04 AM

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");
    })
)

5 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 09 Jun 2020, 03:33 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Aleks
Top achievements
Rank 1
Veteran
answered on 17 Mar 2021, 12:08 AM

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.

0
Neli
Telerik team
answered on 19 Mar 2021, 06:04 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Aleks
Top achievements
Rank 1
Veteran
answered on 20 Mar 2021, 04:05 AM

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

0
Neli
Telerik team
answered on 24 Mar 2021, 07:30 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Menu
Asked by
Aleks
Top achievements
Rank 1
Veteran
Answers by
Neli
Telerik team
Aleks
Top achievements
Rank 1
Veteran
Share this question
or