Create Miniature Navigation Buttons with Centered Arrows - Greg Collins

InfoPath Dev

This Blog


Greg Collins

Create Miniature Navigation Buttons with Centered Arrows

When your design calls for navigation buttons that are smaller than the default size, your attempts to resize the buttons and font within the designer might prove frustrating at best. The arrows seem to never center correctly. Creating miniature navigation buttons in InfoPath can be done, but you must make a simple manual addition to the inline style of the buttons in the view .xsl file.

In this task we will create a set of four miniature navigation buttons with the arrows 9, 3, 4, and :, which will represent buttons for the first, previous, next and last items in a list. Let's start by designing a new blank form.

Create the four miniature navigation buttons:

  1. Open the Controls task pane.
  2. Insert a Button into the view.
  3. Select the button, and then set its font size and font to 8pt Webdings.
  4. Double-click the button.
  5. On the General tab of the Button Properties dialog box, type 9 for the label, and then type btnFirst for the ID, as shown in Figure 1.

Figure 1. Setting the properties for the navigation buttons.

For the Webdings font the text '9' is the 9 arrow, '3' is the 3 arrow, '4' is the 4 arrow, and ':' is the : arrow.

  1. On the Size tab, set both the height and width values to 16px, and then click OK.
  2. Make three copies of the button so that there are a total of four buttons in the view.
  3. Change the labels and IDs of the three new buttons to 3, btnPrevious; 4, btnNext; and :, btnLast respectively.

Now all four types of navigation arrows are present in the view. As shown in Figure 2, the arrows in the 16x16 buttons are cut off. This will be fixed by manually editing the XSL.

Figure 2. The arrows are cut off in the miniature navigation buttons.

Modify the inline style for each of the miniature navigation buttons:

  1. Choose Extract Form Files from the File menu.
  2. Select a location to save your extracted form files to, and then click OK.
  3. Close InfoPath to release the lock it places on your form files.
  4. Using a text editor, open your view .xsl file.
  5. Search for the text btnFirst, and then locate the style attribute on the same input element.
  6. Add the following property and value to the end of the inline style:


  1. Add the same property and value to the end of the inline style for each of the remaining three miniature navigation buttons, which can be found by searching for the text btnPrevious, btnNext, and btnLast respectively.
  2. Save the view .xsl file, and then close the text editor.
  3. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.

With the addition of the line-height property to the inline style of each of the miniature navigation buttons, the arrows are no longer cut off, but are properly centered within the buttons, as shown in Figure 3.

Figure 3. The arrows are no longer cut off in the modified miniature navigation buttons.

©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on


No Comments
Copyright © 2003-2018 Qdabra Software. All rights reserved.
View our Terms of Use.