InfoPath Basics: How to make fields in InfoPath the same size

Learn how you can use Layout Tables and the Width property on InfoPath fields to make fields in InfoPath the same size.

ADVERTISEMENTS

When trying to resize controls in InfoPath to make them the same size, there are two things you need to consider.

First, you can use Layout Tables in InfoPath to position InfoPath fields and line them up nicely.

Second, InfoPath fields that have a Width property have a quirk you must understand, otherwise you’ll bang your head against the wall trying to figure out how to make fields in InfoPath have the same size.

Let’s take a look at Layout Tables first…

Layout Tables in InfoPath

As mentioned previously, you can use Layout Tables in InfoPath to position InfoPath fields and line them up nicely.

You can access and add layout tables to an InfoPath form via the Layout task pane, which is accessible via the Format > Layout menu or by clicking Layout on the Design Tasks pane.

InfoPath 2007 offers 5 types of Layout Tables:

  1. Table with Title
  2. One-Column Table
  3. Two-Column Table
  4. Three-Column Table
  5. Custom Table

of which the first and the last are the most useful.

The Table with Title layout table gives you a table that has formatting applied to it, while the Custom Table layout table allows you to define how many rows and columns you want your layout table to contain.

You can add layout tables within other layout tables, and as such create a high level of flexibility where outlining fields on an InfoPath form template is concerned.

In figure 1, I’ve added a Table with Title to my InfoPath form template, and within that, I’ve added a Custom Table with 2 rows and 3 columns.

Layout Tables on an InfoPath 2007 form template
Figure 1. Layout Tables on an InfoPath 2007 form template.

Understanding the Width property of InfoPath fields

When you add a control that has a Width property (such as for example a Text Box control) to an InfoPath form template, the width of the control is set initially to 100%. This means that an InfoPath field will initially have a dynamic width.

As soon as you resize a control after placing it on an InfoPath form template, the width setting of the field will automatically change to an amount of px (pixels). This means that the field will take on a fixed width when you resize it. So unless you change the width of all of the fields, which you want to give the same size to, to the same amount of pixels, the size of fields will almost never be the same after you resize them.

A dynamic width setting on an InfoPath field is important to it having the same width as other fields on the InfoPath form. And once you add a field that has a width of 100% to a cell in a layout table, that field will automatically size to have the same width as the cell that you have placed it in.

So the trick to having all InfoPath fields have the same width is to:

  1. Add a Custom Table layout table to an InfoPath form template.
  2. Resize the columns of the layout table to a width you want all controls within a certain column to have.
  3. Add controls in several rows in one column.
  4. Do not modify the initial width of the control, and if you have, change the width of the control back to 100% via the Properties dialog box and Size tab of the control (see figure 2).

    Width property on the Properties dialog box and Size tab of a Text Box control

    Figure 2. Width property on the Properties dialog box and Size tab of a Text Box control.

The same principles can be applied to the height property of an InfoPath field. When you first add a field to an InfoPath form template, it gets a height value of auto. This is a dynamic height. As soon as you resize a control, it gets a fixed height of a certain amount of pixels.

To change the height back to auto and thus make it dynamic, you’ll have to delete the amount of pixels from the Height field (just empty the Height text box) on the Properties dialog box, and click OK.

The only caveat with the height property is that even if you set the height of a layout table row in advance and then add a control to a cell in that row, that InfoPath field will not take on the same height as the row. So you’ll have to manually change all controls to have the same fixed height if you want them to have the same size where their height is concerned. You can enter an exact number in pixels for the height via the Properties dialog box.

 
 Subscribe via RSS or Email

Copyright: This article may not be used on web sites (whether personal or otherwise), copied, disseminated, altered, printed, published, broadcasted, or reproduced in any way without an expressed written consent of S.Y.M. Wong-A-Ton. The techniques demonstrated in this article may be used within any Microsoft InfoPath project. This article is provided without any warranties. Copyright for this article is non-transferrable and remains with the author, S.Y.M. Wong-A-Ton.

InfoPath 2013 Cookbook: 121 Codeless Recipes for Beginners
InfoPath 2013 Cookbook 2: 121 Codeless Recipes for SharePoint 2013
InfoPath 2010 Cookbook: 101 Codeless Recipes for Beginners
InfoPath 2010 Cookbook 2: 101 Codeless Recipes for SharePoint 2010
InfoPath 2010 Cookbook 3: 101 Code Recipes for C# Developers
InfoPath 2010 Cookbook 5: Integrating InfoPath with Excel and Excel Services


Related Posts

ADVERTISEMENTS

InfoPath 2013 Cookbook: 121 Codeless Recipes for Beginners

InfoPath 2013 Cookbook 2: 121 Codeless Recipes for SharePoint 2013

InfoPath 2010 Cookbook: 101 Codeless Recipes for Beginners

InfoPath 2010 Cookbook 2: 101 Codeless Recipes for SharePoint 2010

InfoPath 2010 Cookbook 3: 101 Code Recipes for C# Developers

InfoPath 2010 Cookbook 4: 101 Code Recipes for VB Developers

InfoPath 2010 Cookbook 5: Integrating InfoPath with Excel and Excel Services