Inner panel not showing scrollbar as intended

[dan_5070]

Hello,

In the below fiddle, I have a parent panel in vbox layout with two children panels. The parent and child panel B (the bottom-most panel in the parent) have a fixed height, and child panel A (the top-most panel in the parent) has a collapsible panel nested within it. Upon expansion of the collapsible panel, child panel A expands, pushing child panel B down. When this occurs, the bottom of child panel B is cut off by the parent panel.

When this happens, I need to make child panel B scrollable. How would I go about doing so?

https://fiddle.sencha.com/#view/editor&fiddle/255c

[Gary Schlosberg]

In your code, panel B (panel2) is already scrollable, but it has no content forcing scrollbars to appear. It still has a height (200) which when added to the height of panel A (220) exceeds the parent height, forcing panel B to be cut off. I think you'd have to decrease the height of panel B when the panel A subpanel is expanded.

[dan_5070]

Alrighty. Is there any sort of function that can be used to determine if panel B is being cut off by a parent container? I bet I could compare the bottom values of each container, but I was just wondering if there is a preexisting function for such a thing.

[evant]

From your fiddle, I'm not really sure what you want to happen. Making 'panel2' scrollable means the content of 'panel2' will scroll. It seems like, with the way things are configured, you would want scrollable: true on the outer-most panel "myTest".

[dan_5070]

I modified the fiddle so that there is now content in panel2. If panel2 gets cut off by the parent container, I guess I need panel2 to take up the height between the bottom of panel1 and the bottom of the parent container (myTest). Then, I need panel2 to have a scrollbar.

My initial thought is to find the height of what panel2 should be changed to by doing something like parentContainer.el.getBottom() - panel1.el.getBottom(). Then, I can set the height of panel2 to the value of the difference. Since scrollable is true on panel2, it should make the scrollbar visible. However, I am just curious if there is some method available that checks to see if a child container is cut off by a parent so that I can skip the subtraction problem.

[evant]

Use flex: 1 on panel2.