# Custom Floating Objects

## Content

You can create custom floating objects.

You can put an HTML element in a floating object. The following image displays a button element in a floating object.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/customfloating.png)

You can specify whether the floating object is visible or locked ([isVisible](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#isVisible) or [isLocked](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#isLocked) methods). The **isLocked** method only has an effect if the sheet is protected. You can use the [dynamicMove](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicMove) method to specify whether the floating object moves when hiding or showing, resizing, or moving rows or columns. You can specify whether the size of the floating object changes when hiding or showing, resizing, or moving rows or columns with the [dynamicSize](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicSize) method.

When the [fixedPosition](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#fixedPosition) method of a floating object is true, the floating object's position is not changed after scrolling, hiding, showing, resizing, or moving rows or columns. The [dynamicMove](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicMove) and [dynamicSize](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicSize) methods are disabled if the **fixedPosition** method is true. If the **fixedPosition** method is true, the floating object can be moved or resized.

The following methods work as before if the **fixedPosition** method is true:

* [endColumn](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumn)
* [endColumnOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumnOffset)
* [endRow](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRow)
* [endRowOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRowOffset)
* [height](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#height)
* [startColumn](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumn)
* [startColumnOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumnOffset)
* [startRow](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRow)
* [startRowOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRowOffset)
* [width](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#width)
* [x](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#x)
* [y](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#y)

You can resize or move floating objects with the mouse. You can also set the width, height, or position of the floating object with the [width](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#width), [height](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#height), [x](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#x), or [y](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#y) method. You can use row and column indexes to specify the position by setting the [startColumn](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumn) and [startRow](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRow) methods. You can specify an offset with the [startColumnOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumnOffset) and [startRowOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRowOffset) methods. You can also set the [endColumn](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumn), [endRow](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRow), [endColumnOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumnOffset), and [endRowOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRowOffset) methods.

The following image displays a custom floating object that uses [startColumn](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumn), [startRow](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRow), [startColumnOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumnOffset), and [startRowOffset](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRowOffset) methods.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/offset.png)

You can select floating objects by using the left or right mouse button or you can use the [isSelected](/spreadjs/api/v16/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#isSelected) method. You can use the Tab key or Shift+Tab to navigate between multiple floating objects. You can select multiple floating objects by holding down Ctrl or Shift while clicking the right mouse button.

You can cut, copy, or paste the floating object with standard shortcut keys. You can also use undo and redo actions with floating objects.

The following code sample adds a custom floating object to the sheet.

```javascript
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
```

When setting an `HtmlElement` as a floating objects content, the `HtmlElement` will be cloned and lose its attributes due to a greater complex policy for floating objects.

The HtmlElement attributes can be applied after the floating object’s content is loaded using the [FloatingObjectLoaded](/spreadjs/api/v16/classes/GC.Spread.Sheets.Events#FloatingObjectLoaded_EV) Event. For example, the following code sample adds an ID and event listener to the loaded floating object’s content.

```javascript
activeSheet.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, (_, args) => {
    args.element.id = 'some_id';
    args.element.addEventListener('click', () => alert('clicking'));
});
```