feat: add colspan support to dashboard #7657
Conversation
|
| */ | ||
| __updateItemMaxColspan() { | ||
| // Temporarily set max colspan to 1 | ||
| this.style.setProperty('--_vaadin-dashboard-item-max-colspan', 1); |
There was a problem hiding this comment.
This seems to cause flickering when resizing.
There was a problem hiding this comment.
Screen.Recording.2024-08-16.at.12.48.39.mov
There was a problem hiding this comment.
Sure, a ResizeObserver isn't synchronous (and there is no CSS-only way to implement the colspan capping). We can later try to improve this by, for example, wrapping the content inside another container that we manually resize to match the host's size.
There was a problem hiding this comment.
I added an issue for this to the ideas column.
There was a problem hiding this comment.
wrapping the content inside another container that we manually resize to match the host's size
Did a quick prototype of this here https://github.com/vaadin/web-components/tree/proto/dashboard-container and it does eliminate the flickering
Description
Add column spanning support for
<vaadin-dashboard-layout>Kapture.2024-08-16.at.09.33.16.mp4
Added API:
--vaadin-dashboard-item-colspan: Applied to a child element of a dashboard layout. Affects its column span in the layout grid.Fixes https://github.com/orgs/vaadin/projects/70/views/1?pane=issue&itemId=74625129
Part of vaadin/platform#6626
Type of change
Feature