How to make roundedrectangale shape width to be dynamic?


Here I have kept minSize(250,50) for rounded rectangle shape.
But if I enable text spacing extension. We could see the text is overflowing the rectangle.
Can someone help with how we can solve this issue and make rectangle width dynamic to the content rendering in it

Are you just asking about a node? If so, please don’t post huge screenshots unless you need to show the whole screen.

What is your node template? What text spacing extension are you using?

The main shape template is “spot”.
Inside it we are using “RoundedRectangle Shape” and “Horizontal Shape” as child shape templates.

Using this text spacing bookmarklet : https://codepen.io/stevef/full/YLMqbo

It seems to me that your node template ought to look something like:

Node "Spot"
    Panel "Auto"
        Shape "RoundedRectangle"
        Panel "Table"
            RowColumnDefinition { column: 0, sizing: go.RowColumnDefinition.None }
            Picture { column: 0, width: ..., height: ... }
            TextBlock { column: 1, stretch: go.GraphObject.Fill }
    "TreeExpanderButton" { alignment: go.Spot.Bottom }

Yes it is similar to the structure you have provided above

I don’t understand how you applied the “letter-spacing” and/or “word-spacing” CSS to what was rendered in Canvas. The letterSpacing and wordSpacing properties are still experimental for Canvas: CanvasRenderingContext2D: letterSpacing property - Web APIs | MDN

How can I reproduce what you experienced?

I have used this link: https://codepen.io/stevef/full/YLMqbo
Here you can find bookmarklet and keep it in your bookmark.
Now open any site, there click on the bookmark and it automatically enables text spacing to overall page

I think we have fixed the problem in v2.3.7: GoJS 2.3.7 released

After up taking v2.3.7: GoJS 2.3.7 released

I am still finding this text spacing issue, what is remedy for it?

Check in the debugger whether you really are using v2.3.7. Evaluate the static property Diagram.version: go.Diagram.version.

Yes, I am sure. We are using v2.3.7.

Screenshot 2023-05-29 at 7.39.01 PM

And still finding the issue of text spacing

Do you get the same text behavior in different browsers or on different platforms?

It’s not working in chrome. But working fine in Safari and Firefox!
Not sure about the exact reason. Only in chrome the text spacing is actually getting effected!

I don’t know why you would want to use that bookmarklet, but it is trying to override GoJS canvas styles using !important in its CSS rules. If you wanted to stop those rules from affecting the GoJS canvas, you could add this to your page:

<style>
  canvas {
    letter-spacing: normal !important; 
    word-spacing: normal !important; 
  }
</style>