Toolbar + Menubar not working since version 20
Hi,
Iam using toolbar in combination with menubar. Since the version 20 its not displaying properly anymore / not displaying at all. I couldnt find any breaking changes in the release history which might cause the problem. Appending my html / blazor code
<SfToolbar @ref="ToolbarTop">
<ToolbarItems>
<ToolbarItem Type="ItemType.Input">
<Template>
<div style="display:flex;">
<div style="display: flex; justify-content: flex-start; margin-top:auto; margin-bottom: auto; margin-right: 15px;">
<img @onclick="@(e => ClickPicture(e))" src="/images/WAA_LOGO_Soil.png" style="width:100%; max-width:180px" />
</div>
@if (MenuCategory != null)
{
<SfMenu @ref="MenuCategory" TValue="MenuItem">
<MenuEvents TValue="MenuItem" ItemSelected="OnItemSelected"></MenuEvents>
<MenuItems>
<MenuItem Url="/allproducts" Text="@localizer["AllProducts"]" HtmlAttributes="@(new() { { "style", "font-family: 'Lato', serif; border-radius:20px;"} })"></MenuItem>
@if (FirstRender)
{
<MenuItem Url="/About" Text="@localizer["About us"]" HtmlAttributes="@(new() { { "style", "font-family: 'Lato', serif; border-radius:20px;"} })"></MenuItem>
}
</MenuItems>
</SfMenu>
}
</div>
</Template>
</ToolbarItem>
....
</ToolbarItems>
</SfToolbar>
Even your example at https://blazor.syncfusion.com/demos/menu-bar/toolbar-integration?theme=fluent is not working for me.
Best regards,
Tobias
Hi Tobias,
We have prepared a sample to check on your reported issue, but unfortunately, we are not able to replicate the issue at our end. We suspect the Styles and Scripts in the _Host.cshtml file might have not referred properly like the below.
[_Host.cshtml]
|
<link rel='nofollow' href=https://cdn.syncfusion.com/blazor/20.2.44/styles/fluent.css rel="stylesheet" /> <script src=https://cdn.syncfusion.com/blazor/20.2.44/syncfusion-blazor.min.js type="text/javascript"></script> |
Note: The Scripts & Styles referred must be the same versions as the connected NuGet version.
Also, we would like to let you know that we have made two breaking changes in 20.1 version. Please follow below release notes and make necessary changes on your project.
https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes
Kindly try the attached sample and let us know if this has resolved your issue.
Regards,
Ruksar Moosa Sait
Attachment: BlazorToolbarMenuBarWorking_500aa2b9.zip
Hello,
thanks for your support. Iam a bit confused to be honest. Iam using Web Assembly not server-side. I have to questions regarding the tags you posted:
<link rel='nofollow' rel='nofollow' href=https://cdn.syncfusion.com/blazor/20.2.44/styles/fluent.css
rel="stylesheet"&/>
Why do you have two times attribute rel assigned and why do I have to specify the version? If I look at your installation guidelines there is no version mentioned in the tag.
Thanks and best regards,
Tobias
Hi Tobias,
Q1: I am using Web Assembly not server-side
We have validated your reported problem in the Web Assembly project and we are unable to reproduce the problem on our end. As we said in our last update we have made some breaking changes in the 20.1 version. So, we suggest you make sure the necessary changes on your application end.
Q2: Why do you have two times attribute rel assigned
We didn’t need to add rel='nofollow' in the stylesheet. So, we suggest you remove the attribute if you have used it.
Q3: why do I have to specify the version? If I look at your installation guidelines there is no version mentioned in the tag
The un-versioned CDN links which always maintain the latest version scripts are deprecated from the 2022 Vol1 - 20.1 version. These links are available with 19.4 version scripts to avoid breaking in sites and apps that use un-versioned links. So, we suggest you use the CDN links with the same version of the Nuget version you are using to available the latest changes on the scripts and styles. You can find the versioned CDN link details from the below UG links.
https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference
https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference
Kindly let us know if you need any further assistance on this.
Regards,
Ravikumar Venkatesan
Attachment: syncfusionblazortoolbarwithmenusample_5b9d9979.zip
