Blazor-Diagrams/Blazor.Diagrams

Link Labels don't render on Firefox

Mr-Technician opened this issue · 5 comments

Link labels do not render at all when using Firefox. This can be reproduced on the Blazor Diagrams home page:
image

Expected result:
image

I have tested Firefox on (latest version except in the last case):

  • My work dev VM, Windows 10
  • A baremetal Windows 10 desktop
  • A hyper-V Windows 11 VM
  • Citrix VDI

All cases had the same issue.

Good day, please how to make label link not blue background color, how to make nodemodel make background red or green. Best regards

Hello, I'll check this and get back to you!

Sycha commented

I have had the same problem. I found that firefox doesn't display foreignObject elements that don't have a height and width defined. I was able to create a work around by adding to the css of a parent component:

::deep foreignObject.diagram-link-label {
width: 100vw;
height: 100wh;
}

There is probably another css attribute that can be set to remove the need to set a large width and height to stop label wrapping.

It still works on Edge and Chrome.

I hope that helps

1px seems to be enough since in CSS I already added overflow: visible;, I will add this to the next version!