Help with layout needed - empty panel collapsing

Hi,

I am trying to design a front page with designer and getting the right results using it but when run,
it is collapsing the middle (“vlContent” - the biggest one) content probably due to the fact it is empty. I want to design
a desktop like page where icons will be placed but the the beginning it must be empty.

I am attaching the design screenshot.

Any help much appreciated.

Regards,
Adrian
12927.png
12928.png

To make things more clear - if one adds three panels to vertical layout and two of them (top and bottom) have
fixed height (eg 30px) and the middle one is set to 100% height, the middle one is not shown (or is but looks like
collapsed). Is there a way to keep the middle one in its full size even if it is empty ?

Thanks,
Adrian

You will need to expand vlContent to get the full size.

In the designer select vlContent and from the layout properties set Expand Ratio to 1.0.

Hi John,

Many thanks for your reply.
Unfortunately that is what I have. To prove it to myself I created this:

  1. class extending UI and creating vertical layout as its content
  2. custom component (extends CustomComponent) with VerticalLayout as its composition root
  3. Added 3 panels to that VerticalLayout:

a) Panel 1 → ExpandRatio set to 0, width to 100% and height to 30px
b) Panel 2 → ExpandRatio set to 1.0, width and height to 100%
c) Panel 3 → ExpandRatio set to 0, width to 100% and height to 30px

  1. custom component added to class extending UI (to vertical layout)
  2. even tried to explicitly set expanding ratio to 1 during 4)

and when run → the middle one (biggest) not shown. So what am I doing wrong here ?

Many thanks,

Adrian

By default a custom component created in the Visual designer is 100% x 100% size. The problem is that you probably have not given your UI layout (verticallayout) a size. In your UI try doing getContent().setSizeFull().

The analyze layout functionality in the debug console should notify you about these kinds of layouting issues. You can run the debug console by appending &debug to the application URL and pressing the AL button. It will notify you about these problems and how to solve them.

Hi John,

You are a magician ! Of course I forgot about getContent().setSizeFull() !
Now it all works fine - thanks to you.

All the best,
Adrian