> For the complete documentation index, see [llms.txt](https://docs.servoy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/anchor.md).

# ANCHOR

## Constants Summarized

| Type                                                     | Name                | Summary                                                       |
| -------------------------------------------------------- | ------------------- | ------------------------------------------------------------- |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [ALL](#all)         | Constant to be used when specifying anchoring for components. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [DEFAULT](#default) | Constant to be used when specifying anchoring for components. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [EAST](#east)       | Constant to be used when specifying anchoring for components. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [NORTH](#north)     | Constant to be used when specifying anchoring for components. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [SOUTH](#south)     | Constant to be used when specifying anchoring for components. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [WEST](#west)       | Constant to be used when specifying anchoring for components. |

## Constants Detailed

### ALL

Constant to be used when specifying anchoring for components.\
Makes the component anchored on all sides. This means that\
the component will keep a constant distance from all sides\
of the window and will grow/shrink as the window is resized.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300);
var strechAllDirectionsLabel = form.newLabel('Strech all directions', 10, 10, 380, 280);
strechAllDirectionsLabel.background = 'red';
strechAllDirectionsLabel.anchors = SM_ANCHOR.ALL;
```

### DEFAULT

Constant to be used when specifying anchoring for components.\
It is equivalent to a combination of NORTH and WEST anchoring.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300);
var stickToTopLeftCornerLabel = form.newLabel('Stick to top-left corner', 10, 10, 200, 100);
stickToTopLeftCornerLabel.background = 'orange';
stickToTopLeftCornerLabel.anchors = SM_ANCHOR.DEFAULT;
```

### EAST

Constant to be used when specifying anchoring for components.\
Makes the component anchored to the right side of the window,\
which means that the component will keep a constant distance\
from the right side of the window. If WEST anchoring is also\
enabled, then the component will grow/shrink as the window\
is horizontally resized.

This constant is used also for setting tab orientation on tab panels.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300);
var strechHorizontallyLabel = form.newLabel('Strech horizontally', 10, 10, 380, 140);
strechHorizontallyLabel.background = 'blue';
strechHorizontallyLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST | SM_ANCHOR.EAST;
var stickToBottomRightCornerLabel = form.newLabel('Stick to bottom-right corner', 190, 190, 200, 100);
stickToBottomRightCornerLabel.background = 'pink';
stickToBottomRightCornerLabel.anchors = SM_ANCHOR.SOUTH | SM_ANCHOR.EAST;
```

### NORTH

Constant to be used when specifying anchoring for components.\
Makes the component anchored to the top side of the window,\
which means that the component will keep a constant distance\
from the top side of the window. If SOUTH anchoring is also\
enabled, then the component will grow/shrink as the window\
is vertically resized.

This constant is used also for setting tab orientation on tab panels.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300);
var strechVerticallyLabel = form.newLabel('Strech vertically', 10, 10, 190, 280);
strechVerticallyLabel.background = 'green';
strechVerticallyLabel.anchors = SM_ANCHOR.WEST | SM_ANCHOR.NORTH | SM_ANCHOR.SOUTH;
var stickToTopLeftCornerLabel = form.newLabel('Stick to top-left corner', 10, 10, 200, 100);
stickToTopLeftCornerLabel.background = 'orange';
stickToTopLeftCornerLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST;
```

### SOUTH

Constant to be used when specifying anchoring for components.\
Makes the component anchored to the bottom side of the window,\
which means that the component will keep a constant distance\
from the bottom side of the window. If NORTH anchoring is also\
enabled, then the component will grow/shrink as the window\
is vertically resized.

This constant is used also for setting tab orientation on tab panels.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300);
var strechVerticallyLabel = form.newLabel('Strech vertically', 10, 10, 190, 280);
strechVerticallyLabel.background = 'green';
strechVerticallyLabel.anchors = SM_ANCHOR.WEST | SM_ANCHOR.NORTH | SM_ANCHOR.SOUTH;
var stickToBottomRightCornerLabel = form.newLabel('Stick to bottom-right corner', 190, 190, 200, 100);
stickToBottomRightCornerLabel.background = 'pink';
stickToBottomRightCornerLabel.anchors = SM_ANCHOR.SOUTH | SM_ANCHOR.EAST;
```

### WEST

Constant to be used when specifying anchoring for components.\
Makes the component anchored to the left side of the window,\
which means that the component will keep a constant distance\
from the left side of the window. If EAST anchoring is also\
enabled, then the component will grow/shrink as the window\
is vertically resized.

This constant is used also for setting tab orientation on tab panels.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300);
var strechHorizontallyLabel = form.newLabel('Strech horizontally', 10, 10, 380, 140);
strechHorizontallyLabel.background = 'blue';
strechHorizontallyLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST | SM_ANCHOR.EAST;
var stickToTopLeftCornerLabel = form.newLabel('Stick to top-left corner', 10, 10, 200, 100);
stickToTopLeftCornerLabel.background = 'orange';
stickToTopLeftCornerLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST;
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/anchor.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.