How to resize the controls on a Microsoft Office InfoPath form based on the width of the form (827009)

SUMMARY

This step-by-step article describes how to resize the controls on a Microsoft Office InfoPath form based on the width of the form.

back to the top

Activate relative sizing for controls that are not tables

The following steps describe how to activate relative sizing for controls that are not tables by using a Rich TextBox control. However, you can also use this procedure for other controls on your InfoPath form.

1. Start InfoPath. Create a blank form.
2. In the Controls task pane, add a Rich TextBox control to the form.
3. Right-click the Rich TextBox control, and then click Rich TextBox Properties.
4. Click the Size tab of the Rich TextBox Properties dialog box, and then set the Width property to 50.
5. Change the units from px to %.
6. Click OK to accept the changes.
   
   When you resize the form, you also resize the width of the Rich TextBox control.

back to the top

Activate relative sizing for tables

You cannot resize tables based on the form in the InfoPath Designer (for table controls that repeat and for layout tables). To support relative sizing for a table on the form, you must manually modify the view. You can preserve your manual modifications by using the mode="xd:preserve" attribute, as follows.

Note If you apply the mode="xd:preserve" attribute to your table, you cannot make changes to your table in the InfoPath Designer.

1. Start InfoPath. Create a blank form.
2. From the Layout task pane, add a Two-Column table to the form.
3. Click anywhere inside the table. On the Table menu, point to Select, and then click Table.
4. On the Table menu, click Borders and Shading.
5. Under Presets, click Outline to add a border to the perimeter of the table. Click OK.
6. Click Save to save the form.
7. On the File menu, click Extract Form Files, and then select a folder to extract the files to.
8. Close InfoPath.
9. By using a text editor (such as Notepad), open the View1.xsl file from the list of extracted files.
10. Locate the following table element in View1.xsl:

    <table class="xdFormLayout xdLayout" style="TABLE-LAYOUT: fixed;...

11. Add the following element above the table element:

    <xsl:apply-templates select="." mode="xd:preserve"/>

    Note You must use the mode="xd:preserve" attribute to make InfoPath retain these changes.
12. Locate the following closing style sheet tag in View1.xsl:

    </xsl:stylesheet>

13. Add a new element above the closing style sheet tag, as follows:

    <xsl:template match="my:myFields" mode="xd:preserve">
    
    </xsl:template>

14. Move the table element and its child elements to the new template element that you created in step 12, as follows:
    1. Locate the following table element in View1.xsl:

       <table class="xdFormLayout xdLayout" style="TABLE-LAYOUT: fixed;...

    2. Select the table element and its child elements, as follows:
       
       From:

       <table class="xdFormLayout xdLayout" style="TABLE-LAYOUT: fixed;...

       To:

       </table>

    3. Press CTRL+X to remove this element. Put the element on the clipboard.
    4. Put the pointer between the opening tag and the closing tag for the new template element, and then press CTRL+V to paste the table information from the clipboard in the new template element.
15. In the table and its child elements, locate the Width settings for the table and its two columns, and then change the Width settings to 50 percent.
16. Save the View1.xsl file. Close the View1.xsl file.
17. In the extracted files, right-click the Manifest.xsf file, and then click Design.
    
    The form opens in InfoPath. In the Design view of the form, the table is replaced by a Preserve Code Block label that is outlined in red.
18. Click the Preview Form button to view the table.
    
    When the form size changes, the width of the table adjusts to maintain a width that is 50% of the form width.

back to the top