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

Shapes.content.relativePadding

configuration

The relative padding of the content as a percentage of the shape size.

shapes.content.relativePadding

Object|Number

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Relative Padded Text",
        relativePadding: 0.1  // 10% of shape size
      }
    }]
});
</script>

shapes.content.relativePadding.bottom

Number

The bottom relative padding of the content as a percentage.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Bottom Relative Padded",
        relativePadding: { bottom: 0.15 }  // 15% of shape height
      }
    }]
});
</script>

shapes.content.relativePadding.left

Number

The left relative padding of the content as a percentage.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Left Relative Padded",
        relativePadding: { left: 0.15 }  // 15% of shape width
      }
    }]
});
</script>

shapes.content.relativePadding.right

Number

The right relative padding of the content as a percentage.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Right Relative Padded",
        relativePadding: { right: 0.15 }  // 15% of shape width
      }
    }]
});
</script>

shapes.content.relativePadding.top

Number

The top relative padding of the content as a percentage.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Top Relative Padded",
        relativePadding: { top: 0.15 }  // 15% of shape height
      }
    }]
});
</script>