Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Installation instructions may not work on NET 8 #425

Open
mattj23 opened this issue Mar 8, 2024 · 10 comments
Open

Installation instructions may not work on NET 8 #425

mattj23 opened this issue Mar 8, 2024 · 10 comments

Comments

@mattj23
Copy link

mattj23 commented Mar 8, 2024 •
edited
Loading

I've tried the installation instructions under the "Getting Started" section of the documentation, starting at Installation and going through Display on a fresh Blazor Web App project from the default template in NET 8, and the output does not match the sample given in the documentation.

I tested this on a Windows 10 machine and on a Manjaro Linux machine. I used Rider on both systems.

When using the default.styles.min.css the positioning of the nodes does not match the sample picture, and the nodes can't be clicked or dragged at all (both Windows and Linux). If @rendermode InteractiveServer is used the nodes can be clicked but not dragged.

From Windows

Picture above is from Windows 10

When using the style.min.css stylesheet, the node positions look like they might be correct, but the link is not drawn (on Windows and Linux) and there is no interactivity. When using @rendermode InteractiveServer the link line is drawn and the nodes can be clicked and dragged, though they look the same (no border or background...I assume that's normal for that stylesheet).

From Windows

Picture above is from Windows 10

I've attached the sample project below:

BlazorApp1.zip

I don't know if I'm missing something simple, if the instructions are now incomplete with the changes to NET 8, or if something is broken. I'm happy to do further tests on either system if that would be helpful.

Thanks!
@JonBrownNHTI
Copy link

Have you found what the issue is?

@Willdew
Copy link

Willdew commented Mar 18, 2024 •
edited
Loading

Hi Matt, i had the exact same problem. After reaching the point of just trying out random lines of code from different projects and hoping for the best, i figured out that adding

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.css" rel="stylesheet" />

to <head> in your App.razor for some reason fixes the problem. Let me know if this also works for you!

@JonBrownNHTI
Copy link

Was this for a .NET 8 project? Still having issues with the nodes rendering even with these two lines.

@Willdew
Copy link

Willdew commented Mar 18, 2024

Interesting. I am running on a .NET 8 project with both client and server-side rendering. The render mode is however InteractiveWebAssembly for this component, so there could of course be a problem for server-side rendering!

@JonBrownNHTI
Copy link

JonBrownNHTI commented Mar 18, 2024 •
edited
Loading

I'm using Radzen components. I wonder if there is a conflict with the CSS. Using the default project mattj23 used it works fine. But my project renders nothing when adding:

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />

If that line is not there the nodes get rendered but you can't do anything with them.

@JonBrownNHTI
Copy link

image

It's there somewhere lol

@stuartmau
Copy link

Hi Matt, i had the exact same problem. After reaching the point of just trying out random lines of code from different projects and hoping for the best, i figured out that adding

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.css" rel="stylesheet" />

to <head> in your App.razor for some reason fixes the problem. Let me know if this also works for you!

That didn't work for me, but it did when adding the two lines to the head section of _Host.cshtml on a relatively empty .net 8 Blazor Server project.

@mattj23
Copy link
Author

mattj23 commented Mar 20, 2024

Hi Matt, i had the exact same problem. After reaching the point of just trying out random lines of code from different projects and hoping for the best, i figured out that adding

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.css" rel="stylesheet" />

to <head> in your App.razor for some reason fixes the problem. Let me know if this also works for you!

@Willdew, I can confirm this worked for me with @rendermode InteractiveServer in the MyDiagram.razor component. I am wondering if the documentation in https://blazor-diagrams.zhaytam.com/documentation/installation is correct but just ambiguously written such that it gives the impression that you use one line or the other rather than both.

It also seems like the documentation can use an update for .NET 8, given that the new Blazor project structure has been shifted around. I'm going to try to figure out how the documentation is structured and maybe make a PR, unless someone who's better positioned to do so wants to update it.

@alexradu95
Copy link

In the App.razor I added the following to the Routes

<Routes @rendermode="InteractiveServer" />

@MPapst
Copy link

MPapst commented Jul 28, 2024

image

It's there somewhere lol

I'm facing the exact same issue, also in combination with Radzen Blazor. Its there, but hidden somewhat.
Did you figure out what the reason is/was?
Its not the rendermode, as I am using WASM standalong, the CSS is there

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@mattj23 @alexradu95 @MPapst @Willdew @JonBrownNHTI @stuartmau