ExtJS: 100% height panel causes overflow

0
votes

I'm having trouble with an Ext panel rendering higher than its container.

I currently have the following hierarchy:

  • div (absolute position, top 0, bottom 0)
    • container
      • panel (width 180, vbox/stretch)
        • panel (height 75)
        • panel (flex 1)
        • container (no height, no flex)
        • panel (height 25)
        • panel (height 50)

The problem is, when the flex: 1 panel has a lot of content, instead of scrolling it decides to push beyond the top div's bounds.

I tried giving the container and panel (level 2 and 3) a height of 100%, this did not help, ext still renders the panel to a height greater than the container's.

I tried giving the container a 'fit' layout, it did not help.

If I give the panel (2nd level) a specific height, it works.

Any ideas?

Edit:

So I changed the 2nd level container to a panel, now it contains it correctly but cuts the overflow off instead of sizing it right. So not much of an improvement, the equivalent of setting overflow:hidden really, good ext.

1
javascriptextjs

1 Answers

0
votes

Fixed this by giving the 2nd level panel a layout of fit, a height of 100% and the child panel a height of 100% also.