How to set up a scrollable vbox pane in FOEX

Most times the viewport’s size is sufficient to display the information you wish to view. Sometimes though, you may want to place more content in there and be able to have a VBOX pane that is scrollable, instead of trying to fit it into the viewport.

By default, if your screen (and your browser window) is too small, all the components will be resized to fit into it as shown in the example below:

FOEX Scrollable Pane example

FOEX Scrollable VBOX Pane example


In brief, there are three grids which have been placed in the Center Pane of this sample application, but because of the small browser window/viewport the grids’ height is too small which makes working with such a setup a bit more difficult.

There is a quick solution to this problem – setting the height of the region or setting up a minimum height for it. Let’s take a look at the ‘minimum height’ approach.

As a first step, you should ensure that the containing pane’s Auto Scroll property is set to ‘Yes’. You can do that by selecting the attributes of the pane, go to Auto Scroll and the set the property to ‘Yes’:

FOEX Scrollable Pane - Auto Scroll property setup


Now add some regions to the pane. For this example I will use 3 grids and a static region.

Note: If you run the application now, you’ll see that all of them are squished down to fit into the viewport. This behaviour happens because you have not set their minimum height just yet.

Select the attributes of each grid (you can use multi-selection) and the static region and click on the FOEX Config button. Scroll to the very bottom and in the Advanced section add "minHeight":500.

FOEX Scrollable Pane - Settings Custom Config


Run the application and you should see that the page now contains three grids and a static region with a minimum height of 500 each.

You can also use the scrollbar at the pane’s level and the regions do not shrink anymore below 500px.

Note: in this case you need to set a minimum height to every region inside of the pane, otherwise the region without a minimum height will not be visible (the height value will be 0), unless there is some ‘extra’ space in the pane to accommodate it.

For example: You set the pane’s height to 1000px and have 2 grids, each with a minHeight of 600px, and a static region for which the minHeight is not set.


FOEX Scrollable VBOX Layout

Expected behaviour:

  1. If both grids are expanded, the HTML region will not be visible at all (because the pane’s height is less than 2 x 600px).
  2. When you collapse a grid, the static region will fill the remaining space ~400px (the difference between the pane’s height and the combined height of the expanded grid plus the collapsed grid’s header).
  3. As you collapse both grids, the static region will fill out all available space which is the pane’s height minus the headers of the two collapsed grids.

At this point you may wonder what the difference between minHeight and using the height + flex approach (in our documentation there is an example which explains this concept by changing the height of a component and its flex value)?

In my next article I’ll get into more detail and show you which property takes precedence. I hope you’ll find the information useful and if you want to explore this topic, feel free to check the demo within the FOEX Documentation.


Do you have a technical question about FOEX or want good tips for improving your application? We’ve launched this series of How To articles to help improve your FOEX applications even more.

Use #askFOEX on Twitter and we’ll get back to you as soon as possible or sign up for a free trial.

Add your comment

Your email address will not be published. Required fields are marked *