HTML Shape Dimensions

[John]

When dragging an HTML shape onto a Diagram.  How can I work out the dimensions of the node?  The HTML shape may be of different sizes depending on its content. Eg.  I might set the Node defaults to a height and with of 200px,  but my HTML component might be 300px square.  So the blue bounding box will not wrap around the whole shape.

[Gowtham Gunashekar]

Hi John,

On the further analysis of the shared details, we understood that you want to measure the size of the HTML element before it is added into the node, but in Blazor we cannot access the DOM and measure the HTML element. We suggest you use to wrap the HTML content inside the div element and set the style for the div as “width:100%;height:100%”, it will render the given HTML content inside the nodes.

Code snippet:

<SfDiagram Height="500px" Width="100%" ID="DataDiagram" ModelType="@model" @ref="@DataDiagram" Nodes="@DataNodeCollection" NodeDefaults="@DataNodeDefaults">

                                <DiagramTemplates>

                                    <NodeTemplate>

                                        @{

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

                                                   // HTML content

                                                 <SfTextBox Placeholder="Node added"></SfTextBox>

                                            </div>

                                           

                                        }

                                    </NodeTemplate>

                                </DiagramTemplates>

                            </SfDiagram>

Documentation for HTML node: https://blazor.syncfusion.com/documentation/diagram/shapes/#html

If we misunderstood your requirement, please share us more details or share a simple sample to replicate the issue. This will be helpful for us to proceed further.

Regards,

Gowtham