New to Kendo UI for jQuery? Start a free 30-day trial

ShapeDefaults.content.padding

configuration

The padding of the shape content.

shapeDefaults.content.padding

Number|Object

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Padded Content",
        padding: 15
      },
      fill: { color: "lightblue" },
      stroke: { color: "blue" }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.bottom

Number

The bottom padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Bottom Padded",
        padding: { top: 5, right: 5, bottom: 20, left: 5 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 100, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.left

Number

The left padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Left Padded",
        padding: { top: 5, right: 5, bottom: 5, left: 20 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.right

Number

The right padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Right Padded",
        padding: { top: 5, right: 20, bottom: 5, left: 5 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.top

Number

The top padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Top Padded",
        padding: { top: 20, right: 5, bottom: 5, left: 5 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 100, height: 60 }
    ]
  });
</script>