Comfy-Org / Comfy-Org/ComfyUI_frontend

Gap between DOM and built-in widgets after node resize

Open
#7,942 4 comments 1 reaction 0 assignees View on GitHub
area:nodes area:ui has repro Potential Bug
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

### Prerequisites

- [x] I am running the latest version of ComfyUI
- [x] I have searched existing issues to make sure this isn't a duplicate
- [x] I have tested with all custom nodes disabled ([see how](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled))

### What happened?

In Nodes 2.0, adding a built-in widget after a DOM widget causes the built-in widget to anchor to the node’s bottom, creating a visual gap when the node is resized
```ts
import { app } from '../../../scripts/app'

app.registerExtension({
name: 'test.node.extension',
async nodeCreated(node, app) {
if (node.comfyClass == 'TestNode') {

// Adding a DOM widget, with some style for visualization
const dom_widget = document.createElement('div')
dom_widget.textContent = 'custom dom widget'
dom_widget.style.textAlign = 'center'
dom_widget.style.border = 'solid'
dom_widget.style.borderColor = 'red'

node.addDOMWidget('custom', 'custom', dom_widget)

// Adding the builtin widget AFTER the DOM widget
node.addWidget('button', 'builtin button widget', '', () => {})
}
}
})

```

Image

This issue does not occur if the built-in widget is added before the DOM widget.
```ts
import { app } from '../../../scripts/app'

app.registerExtension({
name: 'test.node.extension',
async nodeCreated(node, app) {
if (node.comfyClass == 'TestNode') {
// Adding the builtin widget BEFORE the DOM widget
node.addWidget('button', 'builtin button widget', '', () => {})

// Adding a DOM widget, with some style for visualization
const dom_widget = document.createElement('div')
dom_widget.textContent = 'custom dom widget'
dom_widget.style.textAlign = 'center'
dom_widget.style.border = 'solid'
dom_widget.style.borderColor = 'red'

node.addDOMWidget('custom', 'custom', dom_widget)
}
}
})
```

Image

### Steps to Reproduce

1. Create a basic test node in backend :
```python
from comfy_api.latest import io

class TestNode(io.ComfyNode):
@classmethod
def define_schema(cls):
return io.Schema(
node_id="TestNode",
category="test",
display_name="TestNode",
inputs=[io.AnyType.Input("input_any", display_name="any")],
outputs=[io.AnyType.Output("output_any", display_name="any")],
)

@classmethod
def execute(cls, input_any):
return io.NodeOutput(input_any)

class MyExtension(ComfyExtension):
async def get_node_list(self) -> list[type[io.ComfyNode]]:
return [TestNode]

async def comfy_entrypoint() -> MyExtension:
return MyExtension()

```
2. Add the frontend code given above in web directory :
```ts
app.registerExtension({
name: 'test.node.extension',
async nodeCreated(node, app) {
if (node.comfyClass == 'TestNode') {

// Adding a DOM widget, with some style for visualization
const dom_widget = document.createElement('div')
dom_widget.textContent = 'custom dom widget'
dom_widget.style.textAlign = 'center'
dom_widget.style.border = 'solid'
dom_widget.style.borderColor = 'red'

node.addDOMWidget('custom', 'custom', dom_widget)

// Adding the builtin widget AFTER the DOM widget
node.addWidget('button', 'builtin button widget', '', () => {})
}
}
})
```
3. Create a "TestNode" node and resize it.

### How is this affecting you?

Visual/UI issue only

### ComfyUI Frontend Version

1.37.8

### Browser

Chrome/Chromium

### Console Errors

```javascript

```

### Logs

```shell

```

### Additional Context

_No response_

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-7942-Gap-between-DOM-and-built-in-widgets-after-node-resize-2e46d73d365081eb8b03e4c2d5e08140) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.