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

ShapeDefaults.content.relativePadding

configuration

The relative padding of the shape content e.g. 0.03 means 3% of the shape width/height.

shapeDefaults.content.relativePadding

Number|Object

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Relative Padding",
        relativePadding: 0.1
      }
    },
    shapes: [
      { x: 50, y: 50, width: 150, height: 80 },
      { x: 250, y: 50, width: 100, height: 60 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.bottom

Number

The relative bottom padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Bottom Relative",
        relativePadding: { top: 0.05, right: 0.05, bottom: 0.2, left: 0.05 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 80 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.left

Number

The relative left padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Left Relative",
        relativePadding: { top: 0.05, right: 0.05, bottom: 0.05, left: 0.2 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 140, height: 60 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.right

Number

The relative right padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Right Relative",
        relativePadding: { top: 0.05, right: 0.2, bottom: 0.05, left: 0.05 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 140, height: 60 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.top

Number

The relative top padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Top Relative",
        relativePadding: { top: 0.2, right: 0.05, bottom: 0.05, left: 0.05 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 80 }
    ]
  });
</script>