We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Rubberband of HtmlComponents not set correctly


I have encountered the problem, that the rubberband of HTMLComponents are not set correctly. 

When the component has a size of 35 x 10 px, than the rubberband is shifted to the top by ~50%.


With a size of 35 x 20px it looks much better, but still not perfect. 

For each component, regardless of the size, the rubberband is a bit shifted. 


When I drag the component to another position it sometimes match perfectly. But this should always be the case regardless of the position of the component.


I would be glad if you could check if there is any problem while calculating the the position of the rubberband. The used HTMLComponents are just images with a fixed size. Nothing complicated.

You can find a working example of the problem in the attachments.


Attachment: SfDiagramComponentRubberband_d6797857.zip

3 Replies

SK Suganthi Karuppannan Syncfusion Team November 17, 2022 03:45 AM

We are able to reproduce the reported issue with an image HTML shape, but when we tried the same with a button instead of an image, the issue was not reproduced. For further analysis, we tried to render the same-sized image inside a div element, but the image rendered outside of the div element. Please refer to the screenshot for your reference.

In order to fix this problem, we changed a sample to measure the image location using a JavaScript interop call and apply the value to the image element's transform property. Please refer to the code snippet and modified sample for your reference.

Code Snippet



<img src="@Url" @ref="@imageElement" style="transform: @transform"/>



private ElementReference imageElement;

public string transform = "";
protected override async Task OnAfterRenderAsync(bool firstRender)


        if (firstRender && string.IsNullOrEmpty(transform))


            transform = await jsRuntime.InvokeAsync<string>(

                "getTranform", imageElement);






window.getTranform = function (imageElement) {

    if (imageElement) {

        var measureElement = document.createElement('div');

        measureElement.id = "measureImageElement";

        measureElement.setAttribute("style", "visibility:visible; height: 0px ; width: 0px; overflow: hidden;font-size: 12px;")

        var cloneImageElement = imageElement.cloneNode(true);

        cloneImageElement.id += "copy";



        var imageBounds = cloneImageElement.getBoundingClientRect();

        var measureElementBounds = measureElement.getBoundingClientRect();

        var transform = "translate(" + (measureElementBounds.left - imageBounds.left) + "px," + (measureElementBounds.top - imageBounds.top) + "px);";


        return transform;



Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDiagramComponentRubberbandModified_b4827b22.zip

LT Lukas Trachsel November 20, 2022 09:51 AM

Hi Suganthi,
thank you for the quick response. I tested it, but the behaviour gets worse. Now the rubberband is shifted downwards for all HTMLComponents:

Furthermore the problem with the minimal offset of the rubberband depending on the position of the HTMLComponent still exists.

I would be glad if you could check this again.
Note: The screenshots show the behaviour of the working example you gave me. I have not changed anything in your example.
Browser details: Chrome Version 107.0.5304.88 (64-Bit)


SU Sumathi Uthayakumar Syncfusion Team November 21, 2022 12:17 PM


We have opened a ticket under your account. Please follow that ticket for further updates.

Live Chat Icon For mobile
Up arrow icon