Tab header not showing on version 20.3.0.47

Hello,

I am using the SfTab component and I updated Syncfusion nuget from version 20.1.0.60 to 20.3.0.47 and the headers of the tab items are no longer showing. I also updated the Syncfusion.Blazor.Themes nuget and nothing changed.

Any ideas on how to solve this ?

I am posting the project here.


Thanks in advance!


Attachment: BlazorApp3_9aac3362.zip


1 Reply 1 reply marked as answer

RV Ravikumar Venkatesan Syncfusion Team October 3, 2022 11:04 AM UTC

Hi Amanda,


Greetings from Syncfusion support.


We have validated your query “Tab header not showing on version 20.3.0.47” at our end. On your shared sample the script and styles referred to when we are using the individual Nuget packages. If you are using Syncfusion.Blazor Nuget package. You need to refer to the script and styles as shown in the below code snippet. Refer to the below UG links for more details.


Note: If you are using Syncfusion.Blazor packages it’s not required to install Syncfusion.Blazor.Themes package. You can refer to the styles from Syncfusion.Blazor packages as shown in the below code snippet. From the 2022 Vol1 (20.1) version - The default value of IgnoreScriptIsolation is changed to true, so, you don’t have to set the IgnoreScriptIsolation property explicitly to refer to scripts externally.


https://blazor.syncfusion.com/documentation/appearance/themes#refer-theme-style-sheet-from-static-web-assets

https://blazor.syncfusion.com/documentation/common/adding-script-references#refer-script-from-static-web-assets

https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?cs-save-lang=1&cs-lang=razor#register-syncfusion-blazor-service


[_Layout.cshtml]

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="~/" />

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />

    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

    <link rel='nofollow' href="BlazorApp3.styles.css" rel="stylesheet" />

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

 

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

</head>


Kindly try the shared solution and let us know if you need any further assistance on this.


Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.


Attachment: syncfusionblazorserverapp20.3.47_72010465.zip

Marked as answer
Loader.
Up arrow icon