> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Defining Bounding Boxes

> You can define bounding boxes for every element separately or in the plugin options which will apply the bounding box to multiple elements.

## How to define a bounding box

The [bounding box property](https://jquerydoc.fancyproductdesigner.com/classes/Options.defaults.elementParameters.html#property_boundingBox) accepts 3 different values.

|  |
| Boolean: false | Default value. No bounding box. |
| Object: {width: 100, height: 200, y: 20: x: 50} | An object defining a custom bounding box by setting size and position of the bounding box. |
| String: "ANOTHER_ELEMENT_TITLE" | The title of another element in the same view. This size and position of this element will be used as bounding box. |

## 
## Bounding Box Mode

With the property [boundingBoxMode](https://jquerydoc.fancyproductdesigner.com/classes/Options.defaults.elementParameters.html#property_boundingBoxMode) you can define how the element is behaving when the element hits the boundaries. Currently there are 4 different modes:

|  |
| inside (default) | As soon as the element is moved outside of the bounding box, a message will display to let the user know, that the element needs to be moved into the bounding box. If an element is outside of the bounding box and the methods getProduct() or getOrder() are called, an alert message will be displayed. |
| clipping | The element will be clipped into the bounding box. |
| limitModify | The element can only be transformed inside the bounding box. |
| none | The bounding box is visible, but the element can be moved outside of the bounding box without any limitation. |

## Scale Mode (only images)

The [scaleMode](https://jquerydoc.fancyproductdesigner.com/classes/Options.defaults.imageParameters.html#property_scaleMode) property will define how an image element is scaled into the bounding box.

* fit: The image is scaled to fit inside the bounding box. The whole image is visible.
* cover: The image is scaled to cover the whole bounding box.