Panel does not stretch as per text

GoJS
1

Hi,

I am trying to have a node which has a image and a text. I want the node to expand when the text is longer. Now it wraps the content and the node takes the width of the image.

Here is the template I am using.

$(go.Panel, "Vertical",
    {
    },
  $(go.Panel, "Vertical",
      {
        name: "InnerPanel",
        margin: new go.Margin(9, 0, 0, 0)
      },

    $(go.Picture,
    {
      margin: new go.Margin(9, 0, 0, 0),
      alignment: go.Spot.Top,

      imageStretch: go.GraphObject.Fill
    },
    new go.Binding('source', 'source'))),
    $(go.TextBlock,
  {
    /* textAlign: 'center',*/
    font: '400 24px noto_sansregular',
    stroke: '#ebeff0',

    editable: false,
    margin: new go.Margin(0, 0, 0, 0),
    // visible: true,
    isMultiline: true,
    alignment: go.Spot.Bottom,
    stretch: go.GraphObject.Fill
  },
        new go.Binding('text', 'name').makeTwoWay(),
        /*new go.Binding('stroke', 'textColor'))), */
        new go.Binding('stroke', 'textColor', function(textColor) {
          if (textColor === null) {
            return '#ebeff0';
          } else {
            return textColor;
          }
        }))
  )
2

Please could you make sure your code is formatted and indented correctly? I have already put your code inside triple backquotes to get it styled as code, and I did a quick formatting for indentation, but you can finish the job.

I think part of the problem is that you set the Picture to stretch. Give it a fixed width and height.

General comments: your Panels should have more than one element in them. Usually it’s wasteful and confusing if you have unnecessary Panels.

Some of the properties that you’ve set have no effect. Some are because you’re just setting them to their default value. Some are because they have no effect given the Panel that they’re in.

3

Sure,

I will keep it in mind.
I cannot set the Height and width as I need the image to take space based on the SVG that I bind.
Any other way to do this?

Thanks
VIshal

4

You must give a go.Picture the same desiredSize as the width/height of your .svg if you want it to work in all browsers, due to the limitations of SVG. See the last section here: GoJS Pictures -- Northwoods Software

The way to let SVG images stretch is to use a Viewbox panel. See the last section here: GoJS Panels -- Northwoods Software