RadMenu theme broken after latest update (2021.2.511.45)

1 Answer 84 Views
Menu
Chris
Top achievements
Rank 1
Chris asked on 13 May 2021, 10:12 PM
I just updated to 2021.2.511.45 and the MetroTouch theme in my RadMenu is no longer showing. The menu has no formatting at all now. What's happened?
Mark
Top achievements
Rank 1
commented on 13 May 2021, 11:09 PM

I have the same issue with Metro skin and submitted a ticket yesterday. Have been advised there is an issue. They are working on a fix to this issue.
Chris
Top achievements
Rank 1
commented on 14 May 2021, 04:18 AM

Thanks Mark. Did they give a sense of whether this is going to be a quick fix or will my app look like crap till the next release in 3 months?
Mark
Top achievements
Rank 1
commented on 14 May 2021, 04:43 AM

Hi Chris
This is what they told me
"Indeed there is an issue where the font-size for the Classic render mode skins is changed and we will do our best to create some workaround files you can use to restore the previous behavior. They should be useful until we fix the issue in the upcoming service pack.

As this takes some time, could you please share the Skin you are using so we can share with you the skin-specific file when it is ready?"
So no real indication of an actual time frame.
Chris
Top achievements
Rank 1
commented on 14 May 2021, 04:47 AM

Ok, thanks.

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 14 May 2021, 12:06 PM

Hello all,

There is an issue where the font and line-height for the controls in Classic render mode is changed, leading to different size and layout of the components.

We have created a feedback portal item you can follow to get notified when there is any progress on the appearance issue for the controls in Classic render mode. It should be part of the upcoming service pack and it should persist the same appearance as the previous releases.

Also, it contains an attachment that contains the fix .css files for each of the available skins, restoring the font-size, font-family and line-height to the values of the previous release. Loading the files as per the description of the feedback item should resolve the issue.

@Chris, the issue is related mainly to the font, so even with the change, the Menu should have some styles applied. You can check the expected "broken" appearance of the Menu with Classic render mode and MetroTouch skin here:

If that does not fix your issue please edit your question to include more information, page/menu markup and code-behind, and screenshots of the previous and current appearance or submit a support ticket with the same information.

In the meantime, please ensure there are no JavaScript errors in the browser's console and no failing requests in the Network tab of the browser's DevTools:

Regards,
Peter Milchev
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.

Dave
Top achievements
Rank 1
Veteran
commented on 14 May 2021, 03:14 PM

The fix .css took care of my issues with RadButton, Default Skin. Thanks so much!!
Chris
Top achievements
Rank 1
commented on 14 May 2021, 07:53 PM

It fixed it initially for me with radmenu (metrotouch) appearing fine. but then on a page with a radgrid using silk theme it broke not only the look ofthe radmenu but also the dropdown movement of the radmenu. I have put my project back to the previous version which is frustrating becuase I wanted to use the new radswitch amongst other things.
Dave
Top achievements
Rank 1
Veteran
commented on 16 May 2021, 07:09 PM

Should also mention that I needed to add !important to each of the pertinent styles in fixes css. Adding this did the trick.
Peter Milchev
Telerik team
commented on 19 May 2021, 12:47 PM

@Chris, Can you please ensure there is no Mixed render mode issue when you have the Menu and Grid on the page? https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-determine-mixed-render-mode 

@Dave, if you increase the selectors' specificity, the !important would not be needed. In your case it is needed probably because you load the styles in the <head> instead of the <body> as explained in the feedback portal item. This is needed because the selector in the fixes and the built-in skins is the same and the built-in styles are loaded programmatically at the end of the <head>, hence overwriting any existing style rule with the same selector.

 

Dave
Top achievements
Rank 1
Veteran
commented on 19 May 2021, 01:31 PM

@Peter thanks for your response. However, I did follow the portal's advice "load them either in the beginning of the <body> or using RadStylesheetManager." I added them to RadStyleSheetManager, which only worked when !important was added. When I remove the styles from RadStyleSheetManager and add them to the top of <body>, I get the desired result without !important. Seems the RadStyleSheetManager option doesn't work.?
Peter Milchev
Telerik team
commented on 19 May 2021, 01:49 PM

Thanks for pointing that out, @Dave. I have updated the feedback portal item to describe that the OrderIndex needs to be set to a big number in order to ensure the loaded file will be after the built-in files: <telerik:StyleSheetReference Path="fixes.css" OrderIndex="99999" />

https://docs.telerik.com/devtools/aspnet-ajax/controls/stylesheetmanager/serving-external-style-sheets#orderindex 

Chris
Top achievements
Rank 1
commented on 19 May 2021, 10:12 PM

As mentioned early, I have reverted back to the previous version. I don't want to implement this temporary fix. Will there be an interim release of 2021.2 that fixes this bug or will we have to wait for 2021.3.x? And if so, when will that be, September-ish? Thanks.
Rumen
Telerik team
commented on 20 May 2021, 09:06 AM

The problem will be fixed in the upcoming R2 2021 SP1 release, due in mid-June, 2021. Please subscribe (if you haven't already) to this forum discussion to receive status updates.
Tags
Menu
Asked by
Chris
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or