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

Connections.content.padding

configuration

The padding options of the connection label. Applicable when background or border is set.

connections.content.padding

Number|Object

Default: { left: 4, right: 4, top: 2, bottom: 2 }

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: 10
        }
    }]
});
</script>

connections.content.padding.bottom

Number

The bottom padding of the connection label.

Default: 2

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: {
                top: 2,
                right: 4,
                bottom: 10,
                left: 4
            }
        }
    }]
});
</script>

connections.content.padding.left

Number

The left padding of the connection label.

Default: 4

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: {
                top: 2,
                right: 4,
                bottom: 2,
                left: 15
            }
        }
    }]
});
</script>

connections.content.padding.right

Number

The right padding of the connection label.

Default: 4

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: {
                top: 2,
                right: 15,
                bottom: 2,
                left: 4
            }
        }
    }]
});
</script>

connections.content.padding.top

Number

The top padding of the connection label.

Default: 2

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: {
                top: 10,
                right: 4,
                bottom: 2,
                left: 4
            }
        }
    }]
});
</script>