How to get FlexBox's needed height to show all items?


#1

Hi JUCErs,

I am trying to implement the following UI:

  • ContainerComponent holding a Viewport. Viewport holds a GridView/GridListBox-type of component;
  • The GridView in question has a FlexBox instance and a bunch of child components all associated 1:1 with a FlexItem.
  • The GridView can grow in height (horizontal scroll in the Viewport is OK), but not on width (hence the need for something like FlexBox).

My issue:

  • How do I recompute the height of the GridView, based on the height that is required by the FlexBox to show all of the components it manages within the restricted width?

Any help is much appreciated.

Cheers.

Update:
I guess, an easier explanation of what I am trying to achieve would be “A FlexBox, which automatically grows on height when lowering its width, so all items in it are always visible”.


#2

@jimc What did you end up implementing for the album-cover UI, here?

I think this is the same type of UI as mine - you do resize it on height and place it in a Viewport for scroll, I assume?


#3

I can’t remember now :slight_smile:


#4

“Aaaand that’s why you should always use version control, kids!” Hahaha.

I guess I will just calculate the size manually, with all thumbs at a fixed size, so they are always predictable.

Thanks for the reply, anyways.

P.S. Almost no point of using the FlexBox in this case, but at least it automatically positions the items.