Anonymous div is wrapping Dashboard

[frederikhors]

As reported here too by @natschz the Dashboard component is wrapped in anonymous <div> hard to to target with css selectors and this situation make hard to change properties like 100%.

Can we please avoid that unuseful div?

[arturi]

Thanks for reporting. Is this with a React component? Plain JS Dashboard doesn’t have that extra wrapper:

[frederikhors]

I'm using it with Svelte.

[natschz]

It's happening with the React component as well.

[Murderlon]

I'm not sure if I can get rid of it because AFAIK it can't be a React fragment as we need it as a ref:

    return h('div', {
      ref: (container) => {
        this.container = container
      },
      ...this.validProps,
    })

But I could easily add an id or class if that helps. However I'm not sure what problem you're facing, because the width and height props on Dashboard still work as expected?

[frederikhors]

In Svelte you don't need any new div, right?

[natschz]

Yea, so I'm not into the uppy source code, but having a class on that div, would at least make it possible to target it via css, which probably would be of great help.

[frederikhors]

You can do it already now. What I don't need is that useless div.

[natschz]

Of course you can but it could get unnecessary complicated, but I also agree that we don't need that div.

[Murderlon]

In Svelte you don't need any new div, right?

I'm not an expert on Svelte, but AFAIK this doesn't differ from my React example. We need a ref for the plugin to attach to.

<div bind:this={container} />

Perhaps it is possible to retrieve uppy-Root and turn that into a ref.

[natschz]

If you find a way to remove that div, this would be awesome! But if not I think at least it should get a class, so it is easier to target as wells as not having just one random div wrapping it, because initially I was just wondering where the div is coming from.

[arturi]

Added CSS class for the wrapper container in #3692 for React and Svelte, other integrations to follow.

[Murderlon]

Closing this as we can't get rid of the div but we did add a class on it. If you feel differently, feel free to discuss and we could reopen if necessary.