Configuration position

An object defining widget positioning options.

Type: Object

The postion option takes on an object containing the following fields: my, at, of and offset. Look at the following sentence to see how to use these fields to position the required element against the target element.

"Place my 'left' side at the 'left bottom' corner of the '#targetElement'." The bold quoted phrase located after each option name within the sentence represents a value of the appropriate option.

The offset field takes on a string containing horizontal and vertical offset values (in pixels) separated by space.

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show toast', clickAction: showToast }"></div>
<p style="text-align:center"><b>Position</b></p>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">my</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: positionValues, value: myValue }"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">at</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: positionValues, value:atValue }"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">offset</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: offsetValue }"></div>
  </div>
</div>
<div id="targetElement"></div>
<div id="toastContainer" data-bind="dxToast: { 
  message: 'Toast message', 
  displayTime:2000, 
  position: {
    my: myValue(),
    at: atValue(),
    of: $('#targetElement'),
    offset: offsetValue()
  }
}"></div>
atValue = ko.observable("bottom");
myValue = ko.observable("bottom");
offsetValue = ko.observable("0 0");
showToast = function () {
  $("#toastContainer").dxToast("instance").show();
};
positionValues = [
  "left top",
  "top",
  "right top",
  "right",
  "right bottom",
  "bottom",
  "left bottom",
  "left",
  "center"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}
#targetElement {
  display: inline-block;
  width: 80%;
  height: 170px;
  border-style: solid;
  background-color: lightgreen;
}

at

The target element position that the widget is positioned against.

Type: String
Default Value: "bottom center"
Accepted Values: 'left'|'center'|'right'|'top'|'bottom'

The at option can take on a string value consisting of horizontal and vertical position specifiers separated by a space (e.g., "left top"). The default value for each position specifier is "center". If you assign the "left" value to this option, it will be converted to the "left center" value.

JavaScript
position: { at: 'left bottom' };

my

The position of the widget to align against the target element.

Type: String
Default Value: "bottom center"
Accepted Values: 'left'|'center'|'right'|'top'|'bottom'

The my option can take on a string value consisting of horizontal and vertical position specifiers separated by a space (e.g., "left top"). The default value for each position specifier is "center". If you assign the "left" value to this option, it will be converted to the "left center" value.

JavaScript
position: { my: 'left' };

of

The target element that the widget is positioned against.

Type: Object
Default Value: window

The option can take on one of the following values.

JavaScript
//CSS selector
position: { of: '#targetElement' };

//jQuery wrapper
position: { of: $('#targetElement') };

//DOM element
position: { of: document.getElementById('#targetElement') };

offset

A string value holding horizontal and vertical offset in pixels, separated by a space (e.g., "5 -10").

Type: String
Default Value: "0 -20"

position: { offset: '5 -10' };