Containers

Containers are horizontally stacked in a Slide.
The following keys let you customise the appearance and behavior of the container.

Keys

Name	Type	Possible values	Required
Components	Array (Dictionary)		Required
BackgroundImage	String
IsLarge	Boolean	-	excludes WidthRatio
WidthRatio	Number	0...1	excludes IsLarge
InputComponentsDistribution	String	Fit, Center
InputComponentPercentWidth	Number	0...1
BorderColor	Dictionary (Color)	-
Margins	Dictionary (Margins)	-

Detail

Components Required

Type: Array(Component)
Explanation: Specify here the components held by the container. The order of the components in the array will determine their vertical order when displayed.

info

Components in a container are stacked vertically. Like for Containers in a slide, you can put as many Components as you want in a Container.

To place components side by side, use a Row. To draw a group of components on a rounded surface, use a Card.

BackgroundImage

Type: String
Explanation: Used to specify the background image for the container. This key allows the assignment of an URL or path to the image. The image will be automatically scaled to fit the container.

IsLarge

Type: Boolean
Default: false
Explanation: When set to true, this container will take two third of the available width in the window, while the other container will be restricted to the remaining third. Only applies if two containers are specified in the slide, and if one only has a IsLarge key set to true. It’s not possible to mix WidthRatio and IsLarge.

WidthRatio

Type: Number
Availability: 2.1.0+
Explanation: Specify a width ratio for each container. It’s not possible to mix WidthRatio and IsLarge. The value of the ratio should be between 0 and 1. When no ratio is specified for one or more container, although it is for others, the containers without width ratio specification will equally share the remaining width. The sum of the width ratios has to be lesser than one. And if all containers in a slide have a width ratio specified, the sum of the ratios should be equal to one.

InputComponentsDistribution

Type: String
Possible values: Fit, Center
Explanation: When displaying several input components, you can specify here the distribution those components should adopt. If one component already has a Distribution key set, the general distribution specified in the container has no effect.

InputComponentPercentWidth

Type: Number
Default: 0.4
Possible values: 0...1
Explanation: This value allows you to give more width to an input component, by specifying the percentage width it should take in its container. If specified here, all inputs component should have this width by default if they do not specify one locally. Default is 0.4.

BorderColor

Type: Dictionary (Color)
Explanation: The color of the border drawn around the containers. Override the value set in the ContainersBorderColor of the slide.

Margins

Type: Dictionary (Margins)
Default: 15 pt on each edge
Availability: 3.1.0+
Explanation: The padding between the container's edges and the components it holds. Each edge you specify overrides the default for that edge only, and an explicit 0 makes the content flush with that edge.

warning

Before Octory 3.1.0, this key was accepted but ignored, and containers had no vertical padding and a fixed 10 pt horizontal inset. Containers now apply a 15 pt inner padding on all four edges by default.

If your components already carry their own Margins to work around the missing container padding, your slides will look more spaced out than before. Remove that per-component padding, or set the container Margins back to 0, to get the previous layout.

info

Media components, namely Image, Carousel, Web, Video and PDF, deliberately ignore this padding and bleed to the container edges: they skip the horizontal padding, and also the vertical one when they are the first or the last visible component. Their own Margins key still applies, measured from the container edge.

A media component placed inside a Row or a Column stays within its cell and never bleeds.

Examples

Container with a IsLarge key set to true.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
            <key>Containers</key>
            <array>
                <dict>
                    <key>IsLarge</key>
                    <true/>
                    <key>Components</key>
                    <array>
                        <!-- The components go here -->
                    </array>
                </dict>
            </array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Container with centered InputComponents

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
            <key>Containers</key>
            <array>
                <dict>
                    <key>InputComponentsDistribution</key>
                    <string>Center</string>
                    <key>Components</key>
                    <array>
                        <!-- The components go here -->
                    </array>
                </dict>
            </array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Specify that the first container should take 60% of the slide width, the second 30% and the last one automatically takes the remaining 30%.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
        <dict>
            <key>Containers</key>
            <array>
                <dict>
                    <key>WidthRatio</key>
                    <real>0.6</real>
                    <key>Components</key>
                    <array>...</array>
                </dict>
                <dict>
                    <key>WidthRatio</key>
                    <real>0.3</real>
                    <key>Components</key>
                    <array>...</array>
                </dict>
                <dict>
                    <key>Components</key>
                    <array>...</array>
                </dict>
            </array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>