Hi there!
I’m trying to recreate the following layout for a web media player i’m creating for work:
https://bleep.com/stream/new+releases#cs=gridM&cs_format=digital&cs_order=desc&cs_sort=id
I’m not sure how to go about it, as when i use grid layout it squishes them all down to the point where the labels aren’t readable.
Is there a way i could emulate this kind of layout by either using a gridlayout or another vaadin component?
Thanks!
Hi,
I’m not exactly sure how to do that, but I’d first try with a GridLayout, with probably some layout component in the cells having a fixed size. Then, some trickery with the CSS :hover selector and the “overflow: visible” vs the default “overflow: hidden”.
Not sure if that would work, but it might be the easiest approch to get the “expand on hover” behaviour at least. You might also be able to do the “show play button on hover” with :hover rules.
If you need lazy loading of content as the user scrolls, you might want to go with Table instead of GridLayout. Well, it has its limitations as well.
Regarding the Label squishing: Labels are (for some reason) 100% wide by default. This causes all kinds of havoc in Horizontal and GridLayouts. So try this; for every label inside the grid, call Label.setSizeUndefined().
hmmm