1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    2
    alexmipego is on a distinguished road

      0  

    Default Unanswered: Distribute empty space/flex

    Unanswered: Distribute empty space/flex


    Hi,

    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:
    vbox
    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?

  2. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    122
    Answers
    15
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    If you trying to keep them the same size as the ones next to them, try this:

    Code:
    layout : {
        type : 'hbox',
        align : 'stretchmax'
    }
    the align config can be used with vbox also.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    2
    alexmipego is on a distinguished road

      0  

    Default


    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.

  4. #4
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    122
    Answers
    15
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    Have you thought about just keeping the weeks rows unchanged and just scroll within the days blocks?

    Something like:
    https://fiddle.sencha.com/#fiddle/9bp

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    2
    alexmipego is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1