dijit/place (version 1.10)

Summary

Code to place a DOMNode relative to another DOMNode. Load using require(["dijit/place"], function(place){ ... }).

See the dijit/place reference documentation for more information.

Property Summary

Method Summary

  • around(node,anchor,positions,leftToRight,layoutNode) Position node adjacent or kitty-corner to anchor such that it's fully visible in viewport.
  • at(node,pos,corners,padding,layoutNode) Positions node kitty-corner to the rectangle centered at (pos.x, pos.y) with width and height of padding.x 2 and padding.y 2, or zero if padding not specified.

Properties

__Position
Defined by: dijit/place
__Rectangle
Defined by: dijit/place

Methods

around(node,anchor,positions,leftToRight,layoutNode)
Defined by dijit/place

Position node adjacent or kitty-corner to anchor such that it's fully visible in viewport.

Place node such that corner of node touches a corner of aroundNode, and that node is fully visible.

Parameter Type Description
node DomNode
anchor DomNode | dijit/place.__Rectangle

Either a DOMNode or a rectangle (object with x, y, width, height).
positions String[]

Ordered list of positions to try matching up.

  • before: places drop down to the left of the anchor node/widget, or to the right in the case of RTL scripts like Hebrew and Arabic; aligns either the top of the drop down with the top of the anchor, or the bottom of the drop down with bottom of the anchor.
  • after: places drop down to the right of the anchor node/widget, or to the left in the case of RTL scripts like Hebrew and Arabic; aligns either the top of the drop down with the top of the anchor, or the bottom of the drop down with bottom of the anchor.
  • before-centered: centers drop down to the left of the anchor node/widget, or to the right in the case of RTL scripts like Hebrew and Arabic
  • after-centered: centers drop down to the right of the anchor node/widget, or to the left in the case of RTL scripts like Hebrew and Arabic
  • above-centered: drop down is centered above anchor node
  • above: drop down goes above anchor node, left sides aligned
  • above-alt: drop down goes above anchor node, right sides aligned
  • below-centered: drop down is centered above anchor node
  • below: drop down goes below anchor node
  • below-alt: drop down goes below anchor node, right sides aligned
leftToRight Boolean

True if widget is LTR, false if widget is RTL. Affects the behavior of "above" and "below" positions slightly.
layoutNode Function
Optional

For things like tooltip, they are displayed differently (and have different dimensions) based on their orientation relative to the parent. This adjusts the popup based on orientation.
Returns:undefined

Examples

Example 1

placeAroundNode(node, aroundNode, {'BL':'TL', 'TR':'BR'});

This will try to position node such that node's top-left corner is at the same position

as the bottom left corner of the aroundNode (ie, put node below aroundNode, with left edges aligned). If that fails it will try to put the bottom-right corner of node where the top right corner of aroundNode is (ie, put node above aroundNode, with right edges aligned)

at(node,pos,corners,padding,layoutNode)
Defined by dijit/place

Positions node kitty-corner to the rectangle centered at (pos.x, pos.y) with width and height of padding.x 2 and padding.y 2, or zero if padding not specified. Picks first corner in corners[] where node is fully visible, or the corner where it's most visible.

Node is assumed to be absolutely or relatively positioned.

Parameter Type Description
node DOMNode

The node to position
pos dijit/place.__Position

Object like {x: 10, y: 20}
corners String[]

Array of Strings representing order to try corners of the node in, like ["TR", "BL"]. Possible values are:

  • "BL" - bottom left
  • "BR" - bottom right
  • "TL" - top left
  • "TR" - top right
padding dijit/place.__Position
Optional

Optional param to set padding, to put some buffer around the element you want to position. Defaults to zero.
layoutNode undefined

For things like tooltip, they are displayed differently (and have different dimensions) based on their orientation relative to the parent. This adjusts the popup based on orientation.
Returns:undefined

Examples

Example 1

Try to place node's top right corner at (10,20). If that makes node go (partially) off screen, then try placing bottom left corner at (10,20). 

place(node, {x: 10, y: 20}, ["TR", "BL"])
Error in the documentation? Can’t find what you are looking for? Let us know!