View Full Version : Border Layout Height

27 Feb 2015, 3:51 PM
I have searched for an answer for this with no luck other than "Use a Viewport" which is not the answer.

I have a small EXT JS app which is run in a <div> in a Metro styled management interface

The app has a Panel with a FIT layout.
Inside that I have a Panel with a BORDER layout.
I have a west region grid panel with a FIT layout and a flex = 1.
I have a center region grid panel with a FIT layout and a flex = 2.

The content of the west and center panels size to fit, i.e. both have a paging toolbar docked to the bottom of the panel which are where they should be, the proportions match the flex values.

The top panel with the fit layout fills the <div> in the management interface

The panel with the border layout scales to fit the width of the <div> BUT I cannot get it to fit the height of the div, it leaves a blank area below the panel, I need to put a height in the panel config to get it to render.

How can I get the border panel to fit the <div> height and re-size with <div> in the browser, I guess that its going to require determining the div height and recalculating the border panel height...

Please help I have spent too much time on this already


28 Feb 2015, 2:09 AM
Maybe thewidth: '100%',height: '100%'for the main panel will solve the problem.P.S.why have you wrapped the border layout panel with another fit layout panel? Is not it better to use only one border panel and render it in your div?

28 Feb 2015, 5:25 PM
You may be able to get the outer panel the correct size using CSS but you'll still need to call updateLayout to force the layouts to re-run if the div changes size.