.NET 6 - Diagram not rendering

[jvetter713]

I've followed the instructions to a tee but nothing is being rendered. No exceptions either.

I downloaded the source code and ran the Wasm project and it works perfectly. It seems this demo project is .NET Core 3.1. I saw that you recently upgraded the projects to .NET 6 but the code I downloaded today does not reflect this.

Are there any special instructions for .NET 6 Blazor Web Assembly?

[zHaytam]

Hello,

Please make sure your parent element (where DiagramCanvas is used) has a height and width, it needs to be visible by itself for the diagram to be visible.

[jvetter713]

Hang on....I have to figure out how to format code

[jvetter713]

I saw the note about that and here is what I tried.

EmptyLayout.razor - This is barebones like so:

@inherits LayoutComponentBase

<div class="diagram-container">
    @Body
</div>

diagram-container is defined in app.css like so:
.diagram-container {
    width: 100%;
    height: calc(100% - 52px);
}

Next, I tried this: I removed the diagram-container div in the layout and placed it within the page component like so:

<div class="diagram-container">
    <CascadingValue Value="Diagram">
        <DiagramCanvas></DiagramCanvas>
    </CascadingValue>
</div>

Finally, I tried inline height and width like so:

<div style="height: 100%; width: 100%">
    <CascadingValue Value="Diagram">
        <DiagramCanvas></DiagramCanvas>
    </CascadingValue>
</div>

and then this way in the empty layout:

<div style="height: 100%; width: 100%">
    @Body
</div>

Thanks for helping!

[zHaytam]

You need to inspect your page and seeif your .diagram-container has an actual size. Using 100% also requires the parent to have a specific size, so maybe try with pixels first.

[jvetter713]

Ah...a clue. The body is showing 1920x0

[jvetter713]

I got it!

Probably needs tweaking, but this did it!

• app.css

html,
body {
    height: 100%;
}

#app {
    height: 100%;
}