Blazor.Diagrams icon indicating copy to clipboard operation
Blazor.Diagrams copied to clipboard

Link Labels don't render on Firefox

Open Mr-Technician opened this issue 1 year ago • 3 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.

Mr-Technician avatar Oct 31 '23 18:10 Mr-Technician

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

prof3000 avatar Nov 07 '23 15:11 prof3000

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

zHaytam avatar Nov 09 '23 07:11 zHaytam

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

Sycha avatar Feb 04 '24 13:02 Sycha

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

zHaytam avatar Feb 24 '24 10:02 zHaytam

Thanks! @zHaytam

Mr-Technician avatar Feb 26 '24 17:02 Mr-Technician