Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Template for Blazor

Bucher free asked 3 years ago


Hello,

I tried to convert your integration admin template for .NET and ASP.NET MVC to Blazor,but the sidebar isn't working.

Can you provide me a ready to use sample for Blazor Server Side?

Regards, Barnabas Bücher


Grzegorz Bujański staff commented 3 years ago

Unfortunately for .net we only have this one integration. Blazor integrations should be done on your own. What exactly doesn't work for you. Have you got a bug in your console? Sidenav is visible on the site? Adds correctly to the DOM?


Bucher free commented 3 years ago

Hello,

I just tried to use your .net Template in Blazor Server Side.

So I started with a Blank App and insert the parts from the .NET Template.

The sidebar isn't hide if the Window get smaller.

Also the hamburger menu doesn't appear if the size gets smaller.

Regards, Barnabas Bücher


Grzegorz Bujański staff answered 3 years ago


This is because sidenav has not been initialized. Just add a condition that will check it:

let sidenavInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav'));

if (!sidenavInstance) {
  sidenavInstance = new mdb.Sidenav(document.getElementById('sidenav'));
}

window.addEventListener('resize', sidenavInstance.hide());

Bucher free commented 3 years ago

Hello,

thank you for your help, it's working now with Server Side Blazor.

Regards, Barnabas Bücher


Grzegorz Bujański staff answered 3 years ago


Sorry, but we don't download files from sources unknown to us for security reasons. Sidenav does not hide by default after resizing the window. You have to handle it yourself.

const sidenavInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav'));
window.addEventListener('resize', sidenavInstance.hide());

Bucher free commented 3 years ago

Hello,

the problem is that the function mdb.Sidenav.getInstance(sidenav)returns null:

const sidenav = document.getElementById("sidenav-1");const instanceSide = mdb.Sidenav.getInstance(sidenav); //null



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Windows
  • Browser: Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No