Blazor-Diagram elements in my page dom tree but not visible. #360
-
|
I am trying to render a simple diagram in a MudBlazor application but no diagram is displayed even though the browser developer tools element list shows the expected Blazor-Diagram dom elements ( e.g. Diagram-Container and down to a couple of Diagram-Nodes). When clicking on a Diagram-Node element in developer tools an outline of the Diagram-Node is shown for a moment in the main browser window at the expect position and size. A breakpoint set within OnInitialized() for my diagram component confirms the Blazor rendering is triggered. The application is very simple, just the MudBlazor standard starter template project plus the Simple.razor component lifted from the large Blazor.Diagram demo solution. I think there is some sort of containment hierarchy problem and Diagram-Container cannot establish its dimensions under the MudBlazor component hierarchy but that is just a guess. I have tried wrapping the diagram within a This is in a Blazor Server app. Any suggestions would be appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
A bit more info. The element list in Browser Developer Tool shows a zero height for the diagram-container DIV but the contained diagram-nodes have a height of 80, however these nodes are not visible, This running on the .Net 7 with the latest v3.0.0 of Z.Blazor.Diagrams |
Beta Was this translation helpful? Give feedback.
-
|
Now Fixed. The CSS isolation bundling required a manual edit due to the unusual project structure of the MudBlazor Server template. In order to deliver the MyDiagram.razor.css to the browser I had to include the following link in _Layout.cshtml where the index.html page contents are declared.
In another vanilla Blazor project I noticed that the VS2022 tooling had automatically included a css link for the isolated css. There are many other online discussions about MudBlazor and CSS isolation, my solution might not be best practice but I am up and running. |
Beta Was this translation helpful? Give feedback.
Now Fixed.
The CSS isolation bundling required a manual edit due to the unusual project structure of the MudBlazor Server template. In order to deliver the MyDiagram.razor.css to the browser I had to include the following link in _Layout.cshtml where the index.html page contents are declared.
<link href="MudBlazorDiagramTest.styles.css" rel="stylesheet" />In another vanilla Blazor project I noticed that the VS2022 tooling had automatically included a css link for the isolated css.
There are many other online discussions about MudBlazor and CSS isolation, my solution might not be best practice but I am up and running.