Caption Box

The Caption Box control is a container control meant to enclose a single SPARK control. The purpose of the Caption Box is to allow for many different labeling options; this allows a developer to place labels on any control in more locations than the contained control would allow. Note: if more than one control is placed in a caption box, all but the first are ignored, and a warning will be written to the console. 


Label Formula:  This allows you specify the label associated with the control using a formula expression (see the Formulas article here for additional information).


Width : set as: px, %, or em values. Note: default is px.

Label Placement : sets the label placement relative to the contained control. Options available are:

Label Horizontal Alignment : sets the alignment used for the label. Options available are:

Label Vertical Alignment : sets the alignment used for the label. Options available are:

Shrink to Content : indicates whether or not the container should be shrunk to the size of the contained control

Color Style : sets the color to be used for the label. Options available are:

Label Size Style : sets the size to be used for the label, available options are:

Label Weight Style sets the font weight to be used for the label, available options are:

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).


The Caption Box control only has a single event handler:

  • On Load - When the control is loaded
    • A typical use of On Load might be to dynamically specify the Label positioning using the .setLabelHorizontalAlignment, .setVerticalAlignment, or .setLabelPlacement methods.

More information on specifying events can be found in the Event Handling article.


The first sample demonstrates the Text Area control nested in a Caption Box with the two possible label options: top and left

The following shows some of the label positioning options that the Caption Box supports.  The label text shows the specified option:

The following shows some of the available Style options available for the Caption Box.  The Text Area content displays the options that were specified:


For detailed information on the available methods for this control, access the JS Doc file.



Was this article helpful?
0 out of 0 found this helpful