Container

This element is used to break content into columns and to add a footer to the form. Nested containers must be placed inside Block elements.

Container element does not have a visual representation and is only used to arrange other elements.

Declaration

Container element is declared as an object with "element_type": "Container" property.

Elements displayed inside the Container’s columns are provided as an array of objects in the children property.

{
	"element_type": "Container",
	"children": [
		/*** put child elements here */
	]
}

Required properties

Name	Type	Description
element_type	string	Must be "Container" (case-insensitive).
children	array	Child elements.

Optional properties

Name	Type	Default value	Description
name	string	n/a	Used as a reminder of the container’s purpose; for example, “General Chemistry”. You can use the same value for multiple containers. This text is not displayed on the form.
columns_count	integer	1	The number of columns in the container (1 or more). All columns have the same width regardless of their content.
columns_proportions	array	n/a	Overrides the number of columns and sets their relative proportions. The number of columns is determined by the length of the array. Column widths (in percent) are provided as array items. The grand total of all column widths must not exceed 100%.
container_type	string	“normal”	Determines whether the container is displayed inside the body of the form ("normal") or as a footer at the bottom of the page ("footer"). Each Page can only have one footer!
block_right_margin	integer	40	Right margin (in pixels) of container’s columns.
block_bottom_margin	integer	20	Bottom margin (in pixels) of nested Block elements.
block_top_padding	integer	20	Top padding (in pixels) of nested Block elements.
sync_children_height	Boolean	false	If set to true, all blocks in the container will have the same height, regardless of their content.

Adding page footer

To add a footer that will appear at the bottom of the page:

1. Create a Container object.
2. Set the container_type property of the object to "footer".
3. Provide the content of the footer in the children property.

Allowed child elements

• Block
• AnswerSheet
• Grid
• CompositeGrid

Examples

Check out the code examples to see how Container elements can be used and combined with each other.

Three-column layout

{
	"element_type": "Template",
	"children": [
		{
			"element_type": "Page",
			"children": [
				{
					"element_type": "Container",
					"name": "Three-column layout",
					"columns_count": 3,
					"children": [
						{
							"element_type": "Block",
							"column": 1,
							"children": [
								{
									"element_type": "Content",
									"name": "First column"
								}
							]
						},
						{
							"element_type": "Block",
							"column": 2,
							"children": [
								{
									"element_type": "Content",
									"name": "Second column"
								}
							]
						},
						{
							"element_type": "Block",
							"column": 3,
							"children": [
								{
									"element_type": "Content",
									"name": "Third column"
								}
							]
						}
					]
				}
			]
		}
	]
}

Page footer

{
	"element_type": "Template",
	"children": [
		{
			"element_type": "Page",
			"children": [
				{
					"element_type": "Container",
					"container_type": "footer",
					"children": [
						{
							"element_type": "block",
							"children": [
								{
									"element_type": "Paragraph",
									"children": [
										{
											"element_type": "Content",
											"name": "Aspose.OMR Examples",
											"align": "right",
											"font_style": "bold",
											"font-size": 14
										},
										{
											"element_type": "Content",
											"name": "© Aspose Pty Ltd 2022",
											"align": "right",
											"font-size": 10
										}
									]
								}
							]
						}
					]
				}
			]
		}
	]
}