View Full Version : Distribute empty space/flex

22 Aug 2014, 7:50 AM

I'm trying to do a calendar using Ext JS layouts and components but I've having trouble fine tunning the height of the "weeks"/rows.

I've something like this:
hbox -> flex: 1
hbox -> flex: 1

and it works unless I resize the container, or add too many items into the hbox(es). I've realized that what I need is for flex to distribute the space based on free space and not evenly based on container's height.

Is this possible?

22 Aug 2014, 1:41 PM
If you trying to keep them the same size as the ones next to them, try this:

layout : {
type : 'hbox',
align : 'stretchmax'

the align config can be used with vbox also.

23 Aug 2014, 6:27 AM
Nop, thats not it.Just imagine a month calendar using 100% width and 100% height of the container by default. Without any events each week's "row" will have exactly the same height (basically flex:1 behaviour). But what if you add 100 events on a single day? That week's "row" should grow but all others should split the available space between them.

PS: just to clarify, my problem is only with the week rows height, the days and everything else is already in place.

23 Aug 2014, 7:47 AM
Have you thought about just keeping the weeks rows unchanged and just scroll within the days blocks?

Something like:

24 Aug 2014, 10:53 AM
That wouldn't be ideal. As a fallback I'll just ignore the 100% height of the container requirement, eliminating the need for flex: 1 and just use minHeight. At least there wouldn't be any scrollbars on the days.A second approach would be to code a hack to make a second pass on the layout. Something like hooking on the resize event of the container, let eveything do the layout without flex, compute the final height and available free space and finally split the free space among each week's row... forcing a second layout run. Not ideal but I can't see any other solutions.Obviously I wished for a more "native" solution" if one can be found.