Skip to main content

Center input components in a container

Choosing the display option​

When dealing with InputComponents, it is possible to arrange them in two ways using the Distribution key. The first value this key can take is Fit. This tells Octory to make the component take all the width it needs to be displayed without any cropping. This way, the label associated to the component will be able to fully display its text. For example:

<?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>Components</key>
                      <array>
                        <dict>
                            <key>Type</key>
                            <string>Input</string>
                            <key>InputType</key>
                            <string>Text</string>
                            <key>Distribution</key>
                            <string>Fit</string>
                            <key>Label</key>
                            <string>What is your Mac asset tag ?</string>
                            <key>Variable</key>
                            <string>AssetTag</string>
                        </dict>
                      </array>
                </dict>
            </array>
        </dict>
    </array>
</dict>

On the other hand, this also means that when using several InputComponents in one container, they will not be aligned. If your preference is to have aligned components, you should rather use the Center option which will align the center of the component (middle point between the label and the input field) to the center of the container.
This way, all the input components using this option will be vertically aligned. But the labels of the input components might get cropped.

Setting the display option in the container​

Should you decide that all your input components use the same value for the Distribution key, you can set this option with a more global scope in the container rather then setting it in each InputComponent.
To do so, you have to set the key InputComponentsDistribution in the container to the value you want to use.
For example, we are specifying here to center all the input components in the container.

<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>

info

When you use the InputComponentsDistribution key in a container, you can still set the Distribution key in an InputComponent. Doing so, the value in the InputComponent will override the one of the container, because the scope is less global. This allows you to override locally a value for this key.

Discover more​

  • Tip: Set the width of the input components.
  • To know how to read the information in the input components, you can read this tip.
Last updated on