Sample Form:  Illustrate How To Center a Form using a Panel Holder

Version 1
    Share This:

    Centering a Form using a Panel Holder

     

    We sometimes hear the question, "how can I make my content dynamically centered within in an AR System form?".   There is actually a way to do this using the "Panel Holder" and "Fill Layout" features as of version 7.6.03 and later.   The idea is to create a simple page layout consisting of left and right "margin" panels, and a central panel where the content goes.  By setting the "slack priority" correctly for the panels, the browser will automatically (and equally) grow the right and left margin panels when the browser window is resized (as long as the view's layout style is set to "Fill" of course).  The central panel will remain a fixed size.   Because these panels have all borders removed, the user is unaware of them and experiences the central panel's content as being "centered".

     

    One thing to be aware of is that the right and left panels have a minimum width of 25 pixels each, so this technique will add at least 50 pixels of horizontal whitespace to your layout.  Therefore it may not work well for forms that are already using every available pixel for a certain screen resolution.

     

    A small sample form is the posted document for this article.  Note that as always, sample code like this is an unsupported helper to understand and make use of this technique in your own way.   It may be a good idea to import this form into your AR Server and examine it with Developer Studio to help understand the following instructions.    Another caveat for those not used to "Fill" layout:  the view should only directly contain the panel holder field when you are done, or you will have suprising results.   In other words, make sure that all the original fields are moved into the center panel before attempting to render the form in your browser.

     

    • In the property sheet for the form’s view, make sure the view’s properties are set as follows:
      Layout Style: “Fill”
    • Add a collapsible panel holder field, such as the one called “Centering Panel Holder” in the example form, to the form.  Make sure the field’s properties are set as follows:

     

    Display Type:  “Collapsible”
    Orientation:  “Horizontal”
    Borderless:  “True”
    Width:  <-- make this wide enough so that you can work with it in Developer Studio (to drag fields into it).
    Minimum Height:  1000 <-- Or make it tall enough to accommodate all the original fields.

     

    • Add three panels to the panel holder (you do this from the panel holder’s property under “Panels” called “Add New Panel”), in the following order:  “Left Margin Panel”, “Main Content Panel”, “Right Margin Panel”.    You could give them meaningful names as the ones used in the example form.

     

     

    • “Left Margin Panel”  and “Right Margin Panel” both need to have the following properties:

     

     

    Header State: “Hidden”
    Minimum Size: “25”  <-- this is the lowest it can be set.  So there will be a left and right margin of 25.
    Initial Size: “25”   <-- make this the same as “Minimum Size”
    Maximum Size: “1000”   <-- set this to some large number – try on very w
    Panel State: “Expand”
    Slack Distribution Order: “1”

     

    • “Main Content Panel” is where all the original fields have to be placed.  It has the following properties:

     

     

    Header State: “Hidden”
    Minimum Size: “400”  <-- this has to be wide enough for all the form’s original fields
    Initial Size: “400”   <-- make this the same as “Minimum Size”
    Maximum Size: “400”  <-- make this the same as “Minimum Size”
    Panel State: “Expand”
    Slack Distribution Order: “0”

     

    • Now move all the original fields into the “Main Content Panel”

     

    You can try this technique in your own applications and see if it works well for your particular case.  You may have to play with the sizes on the Main Content Panel to make sure scrollbars appear in the right situations, based on the sizes of your layouts.   I hope you find this technique useful.

     

    Thanks to Elaine T for building and testing the sample form using AR System 7.6.03.