We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Tabs no longer working after replacing Syncfusion.Blazor nuget with the individual component packages

Tabs no longer working after replacing Syncfusion.Blazor nuget with the individual component packages

Hello,

I was recently told by Syncfusion that in order to use the PDFViewer nuget package I needed to use the individual packages (V20.4.0.51) instead of the Syncfusion.Blazor nuget to avoid ambiguous compilation errors.  I have done this and the solution compiles just fine but my tabs are no longer visible.  Instead, I just see text (attached image).  What could I be missing?

Please let me know if there's anything else you need from me.  Thank you for your help,


Mike


3 Replies
RV Ravikumar Venkatesan Syncfusion Team February 23, 2023 06:49 PM UTC

Hi Michael,


Based on your shared snip we suspect that may the styles of the Tab may be not loaded property. If you are using an individual Nuget package we suggest you make sure that you have loaded the tyles from Syncfusion.Blazor.Themes Nuget package or CDN link as shown in the below code snippet. Also, make sure that you have referred to the Syncfuion Blazor components script as shown in the below code snippet. Refer to the shared UG for more details. If you still facing the same problem share the below details to proceed further.


  • Reproduce the issue in our shared sample or
  • Issue reproducing sample.


https://blazor.syncfusion.com/documentation/appearance/themes#reference-themes-in-blazor-application

https://blazor.syncfusion.com/documentation/common/adding-script-references


[_Host.cshtml]

<!DOCTYPE html>

<html lang="en">

<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="syncfusion-blazor-app.styles.css" rel="stylesheet" />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png"/>

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

    @*Syncfusion Blazor components styles*@

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

    @*<link rel='nofollow' href=https://cdn.syncfusion.com/blazor/20.4.51/styles/bootstrap5.css rel="stylesheet"/>*@

 

    @*Syncfusion Blazor components scripts*@

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

    @*<script src=https://cdn.syncfusion.com/blazor/20.4.51/syncfusion-blazor.min.js type="text/javascript"></script>*@

</head>


Regards,

Ravikumar Venkatesan


Attachment: Syncfusion_Blazor_Server_Tab_b33fd66f.zip

ML Michael LeClair February 24, 2023 02:57 PM UTC

Thank you very much.  I've added the following to my _layout.cshtml:


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

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


It is now working fine.  I appreciate the fast responses that the Syncfusion team are providing in this forum.  Excellent work everyone!!!


Mike


RV Ravikumar Venkatesan Syncfusion Team February 27, 2023 09:22 AM UTC

Michael,


You are welcome. Please get back to us if you need any other assistance.


Loader.
Up arrow icon