Ask Reuben

packed

How can I move content to top of form?

Why does the new packed Presentation Style Attribute also ‘pack’ to the left as well as to the top?

In one of the very first Ask Reuben articles, I looked at a question that gets raised when a form has no stretchable elements.  The default spread out rendering was often not what was desired.  The solution was to add an invisible stretchable element such as an empty IMAGE.   This invisible widget would stretch to fill available space, and as a result push or pack the other elements together.  The question then gets raised, should we need to add this invisible stretchable element, can there be a better way?

In GBC 4.01.14, our developers added a better way.  This is in the form of a new Presentation Style Attribute for VBOX and HBOX named “packed”.  If this style is added to a VBOX or HBOX then the VBOX or HBOX child elements are packed to the top or left respectively, you no longer need to add an invisible stretchable element to achieve this.

After its introduction, we get some interesting support cases where developers said they were adding it to VBOX, it was moving child elements to the top ok, but it was also moving child elements to the left when they had not explicitly added it to these HBOX containers.  They had added to their .4st …


<Style name="VBox">
    <StyleAttribute name="packed" value="yes"/>
</Style>

… when we looked at their forms where this was occurring, what we saw was forms of the pattern (containers indented for clarity)…


VBOX
   GRID
...
   END #GRID
   HBOX
      GRID
...
      END #GRID
      GRID 
...
      END #GRID
   END #HBOX
END #VBOX

… that is there was an HBOX container that was the child of a VBOX container, and it was in these child HBOX containers that the child elements were being packed to the left unexpectedly.

The reason this is occurring is a simple one and it occurs by design.  Presentation Styles have the concept of inheritance as documented here.  The HBOX container was inheriting the styles of its parent, the VBOX.  So just as you could set another Style Attribute such as backgroundColor for the VBOX and have it inherited by any child elements (including HBOX) of the VBOX, so too is the packed Style Attribute being inherited.

The solution is a simple one, if you do choose to use the new packed Presentation Style Attribute, what you probably want to add to your .4st is the following …


<Style name="VBox">
    <StyleAttribute name="packed" value="yes"/>
</Style>
 <Style name="HBox">
    <StyleAttribute name="packed" value="no"/>
</Style>

… this will make any VBOX pack to the top whilst leaving any HBOX  unpacked and stretching the width of the form.

So if you are solving the problem of no stretchable elements meaning form content is unpacked both vertically and horizontally …



… and in your .4st, you add packed=yes to VBOX only, and you see this (packed to top and left)…



… when you really want to see is this (packed to top, unpacked horizontally) …



… consider what styles are being inherited and consider explicitly setting packed=no for HBOX in your .4st.