How to fill entire Deneb container

[PBI-David]

I can't figure out how to fill the entire Deneb container, In the screenshot below, the Deneb container has a background of blue.

The spec is a simple one with no size and a single red rect set to fill the entire width and height with no padding. As you can see, the Deneb container still shows at the edges and the rect doesn't fill the whole canvas. Additionally, the padding seems to be uneven - right and bottom are thicker than top and left.

Can you clarify how the sizing of the container works?

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "padding": 0,
  "autosize": "none",
  "data": [],
  "scales": [],
  "marks": [
    {
      "type": "rect",
      "name": "back",
      "clip": true,
      "data": [
        {}
      ],
      "encode": {
        "enter": {
          "fill": {
            "value": "red"
          },
          "x": {
            "signal": "0"
          },
          "y": {
            "signal": "0"
          },
          "width": {
            "signal": "width"
          },
          "height": {
            "signal": "height"
          }
        }
      }
    }
  ]
}

[dm-p]

The sizing is set to use the entire container, which should stretch to fit if you turn off the padding on the container itself (which is an MS-governed setting).

However, in the case of the rendered visual, it seems to be a quirk of the scroll component we use in case of overflow. You can probably see this more pronounced here. Both Deneb visuals have been set with the same 0px padding on the container, blue background, and black border:

Hopefully, you can see that although the visual showing the splash screen has scrollbars, it handles the full container size correctly. In the above visual, the space remaining is equivalent to the space reserved for the scrollbars, even though they are not present. This is because we have a third-party component for configuring scrollbar appearance in the rendered visual. In contrast, the splash screen uses the browser's native overlay scrollbars (which don't take up padding space but aren't customizable to the degree I've been asked to provide by other users).

I believe that to allow full use of the container, we would need to (in order of preference):

• See if we have enough CSS options for overflow: overlay to match our requirements and replace the logic with that
• See if we can configure the scrollbar component to sit over the DOM element that houses the container rather than reserving space for scrollbars we may not need.
• See if we can configure the scrollbar "size" to allow zero pixels. I remember this being more difficult as I tried to do it as part of the other scrollbar configuration settings. But I think this is our fallback if the above does not pan out.

Interestingly, I cannot replicate the space around the top and left of the container seen in your OP in either Desktop or the Service 🤔

[PBI-David]

Thanks Daniel. FYI, I forgot about the padding and when I set it to zero, I get the exact same output as you with just space reserved on the right and bottom side for scrollbars. I'm not sure which solution you should opt for but it would be nice to be able to fill the entire container.

[dm-p]

Righto - I'll mark this as an enhancement and we'll see what we can do 👍

[dm-p]

I have identified a way to implement this, which will be scoped for 2.0. Again, this one needs some underlying changes to the container/rendering structure to work as intended, but it will be possible.