Padding of textBlock

GoJS
1

Hello,

How can I style a ‘padding=5px’ to textBlock?

Thanks!

2

HTML elements have borders within which the padding determines the extra area outside the content. GoJS objects do not have borders, so there is no GraphObject.padding property. (But panels do have a Panel.padding property.)

However, there is a GraphObject.margin property. But the GraphObject.background does not extend into the object’s margin.

So, you did not say why you want to set a hypothetical “padding” property on a TextBlock, but in many cases you could set the margin instead.

3

@walter What would be the solution to adding padding to a textblock.

Given an html div, to make a rectangle with text that does not stick to the edge, I would just do this:

<div style="padding: 5px; background: lightblue;">Padded Text</div>

I want to add a text block to a group and have it padded just like the div example from above.

I have this:

   $(
      go.Group,
      'Auto',
      {
        layout: $(go.GridLayout, {
          wrappingColumn: 6,
          alignment: go.GridLayout.Position,
          cellSize: new go.Size(1, 1),
          spacing: new go.Size(3, 3),
        }),
        selectable: false,
        movable: false,
      },

      $(
        go.Shape,
        {
          strokeWidth: 1,
          stroke: 'lightblue',
        },
      ),
      $(go.Placeholder, {
        padding: 5,
      }),
      $(
        go.TextBlock, // group title
        {
          alignment: go.Spot.TopLeft,
          position: new go.Point(0, -20),
          background: 'lightblue',
          stroke: 'white',
          text: 'Action Required',
          // padding: 5 // <------- Does not work
          // margin: 5  // <------- Only pushes the textblock away from the edge of the group
        },
      ),
)
4

In GoJS one can create a border by using an “Auto” Panel with a Shape. I am guessing that you don’t need a border line, so you would set Shape.strokeWidth to zero. You would set the Shape.fill to be the “lightblue” color that you are trying to draw behind the text. And you would set the TextBlock.margin to control the amount of space beyond the text’s rectangular area. The panel sizes the shape to surround the text, including its margin.

5

Yes!

That did the trick. Thanks.

For anyone interested - In the group node you would put this code:

    $(go.Panel, "Auto",  // the Shape will go around the TextBlock
          { alignment: go.Spot.TopLeft }  // if you want the label on the top left corner
          $(go.Shape, { strokeWidth: 0, fill: "lightblue" },
          $(go.TextBlock,
            { margin: 8, stroke: "white", font: "bold 14px sans-serif", stroke: '#333' }, // Specify a margin to add some room around the text
            // TextBlock.text is bound to Node.data.key
            new go.Binding("text", "key"))
        );
6

TextBlocks without an explicit size ([GraphObject.desiredSize]) should not be used to dictate the size of any objects (ie, a TextBlock with no explicit size should not be the main element of a [Panel] of type [Panel.Auto]).
Probably does not mean this case?

7

You seem to be quoting: GoJS TextBlocks -- Northwoods Software

It depends on whether they want to have the panel or node be exactly the same size in all browsers. For example, that might be needed in some testing situations. Or when saving the routes of links.