Skip to main content

Set input components width

When dealing with InputComponents, it is possible to set their width to better fit your needs using the PercentWidth key. For example, when you ask the end-user to enter a long text in an Input Text Component. The PercentWidth takes a number value between 0 and 1 representing the percentage of the container width the input field should take. The default value is most often 0.4. Here we are setting this value to 0.8 to make the text field bigger.

<?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>PercentWidth</key>
<real>0.8</real>
<key>Variable</key>
<string>AssetTag</string>
</dict>
</array>
</dict>
</array>
</dict>
</array>
</dict>
tip

This option shows better result when no Label key is specified. If you want to display additional text associated to this InputComponent, you can add a TextComponent above.

Setting the display option in the container

Should you decide that all your input components use the same value for the PercentWidth 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 InputComponentsPercentWidth in the container to the value you want to use.
For example, we are specifying here a value of 0.65 for all InputComponents in the container.

<?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>InputComponentsPercentWidth</key>
<real>0.65</real>
<key>Components</key>
<array>
<!-- The components go here -->
</array>
</dict>
</array>
</dict>
</array>
</dict>
tip

When you use the InputComponentsPercentWidth key in a container, you can still set the PercentWidth 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 distribution of the input components
  • To know how to read the information in the input components, you can read this tip.