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

Margin

configuration

Specifies an additional offset, in pixels, applied to the FloatingToolBar position. The margin is applied in both Anchored and Free-position modes.

margin

Object

Default: { horizontal: 0, vertical: 0 }

<div id="target" style="width: 200px; height: 100px; border: 1px solid #ccc; margin: 100px;">Target element</div>
<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  anchor: "#target",
  position: "top",
  visible: true,
  margin: {
    horizontal: 10,
    vertical: 20
  },
  items: [
    { type: "button", text: "Button" }
  ]
});
</script>

margin.horizontal

Number

Specifies the horizontal offset, in pixels, applied to the FloatingToolBar position.

Default: 0

<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  margin: {
    horizontal: 30
  },
  items: [
    { type: "button", text: "Button" }
  ]
});
</script>

margin.vertical

Number

Specifies the vertical offset, in pixels, applied to the FloatingToolBar position.

Default: 0

<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  margin: {
    vertical: 30
  },
  items: [
    { type: "button", text: "Button" }
  ]
});
</script>