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

ContainerAlign

configuration

Specifies the alignment of the FloatingToolBar relative to its positioned container when the anchor option is not set (Free-position mode). This option is ignored when anchor is set.

containerAlign

Object

Default: { horizontal: "center", vertical: "top" }

<div id="container" style="position: relative; width: 400px; height: 200px; border: 1px solid #ccc;"></div>
<script>
$("#container").append("<div id='toolbar'></div>");
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  containerAlign: {
    horizontal: "right",
    vertical: "bottom"
  },
  items: [
    { type: "button", text: "Button" }
  ]
});
</script>

containerAlign.horizontal

String

Specifies the horizontal alignment of the FloatingToolBar within its container in Free-position mode. Valid values are "left", "center", and "right".

Default: "center"

<div id="container" style="position: relative; width: 400px; height: 200px; border: 1px solid #ccc;"></div>
<script>
$("#container").append("<div id='toolbar'></div>");
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  containerAlign: {
    horizontal: "left"
  },
  items: [
    { type: "button", text: "Button" }
  ]
});
</script>

containerAlign.vertical

String

Specifies the vertical alignment of the FloatingToolBar within its container in Free-position mode. Valid values are "top", "center", and "bottom".

Default: "top"

<div id="container" style="position: relative; width: 400px; height: 200px; border: 1px solid #ccc;"></div>
<script>
$("#container").append("<div id='toolbar'></div>");
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  containerAlign: {
    vertical: "bottom"
  },
  items: [
    { type: "button", text: "Button" }
  ]
});
</script>