If you design your form to strictly layout over a background picture, you will find that when you print or use print preview your form no longer aligns with the background picture. Using a grid background picture, Figure 1 shows the extent of the layout variation between the editing and printing.
Figure 1. Forms align to a background picture differently for printing.
InfoPath requires a 21px left margin in the view to allow for the widget icon that appears when you hover over repeating controls. This margin is not required for printing. Each view .xsl file contains an internal style sheet (shown in the following code block) which uses the @media screen at-rule to specify that the media for the contained set of styles applies to computer display screens only—not for other media types such as print.
<style controlStyle='controlStyle'>
@media screen {
BODY { margin-left:21px; background-position:21px 0px; }
}
. . .
</style> |
The style contained in the media at-rule specifies that the background picture be offset the same 21px as the body contents. When you print, both the body margin and the background position will revert to their default values because the media at-rule no longer applies. One problem is that InfoPath places an inline style on the body element, which overrides this at-rule, as seen here:
<body style='BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: no-repeat' background='backgroundPicture.jpg'> |
When the background-repeat property has a value of no-repeat, the background-position property is added to the inline style. This property overrides the at-rule style. By setting your background picture to tile horizontally, vertically, or both, as shown in Figure 2, the background-position property is removed, thus allowing the at-rule style to be applied. But even tiling your background picture, there will be a misalignment between editing and printing because the at-rule specifies a value of zero for the top background position.
Figure 2. Setting the background picture to tile horizontally and vertically.
There are two approaches to matching the alignment of the form contents to the background picture between editing and printing. Each approach will do the trick, but will result in different alignment as can be seen in Figure 3 and Figure 4. The first approach is to modify the standard InfoPath internal style sheets and the inline style on the body element. This approach has some drawbacks—it works well for when you are finished modifying your form template, but you chance losing your modifications if you make them before you are finished. The first approach also explains why this problem exists. The second approach is simpler and will survive modifications to the form template. Let’s review the two approaches.
APPROACH 1 – MODIFY THE STANDARD INTERNAL STYLE SHEETS AND INLINE STYLES
You can manually remove the background-position property from the inline style on the body element, but even this will not fix all of the issues. The first problem is that if you ever make changes in the View Properties dialog box, InfoPath will update the inline style, thus reverting your changes. The second problem is that this only fixes the left position. Referring to Figure 1, you can see that both the left and top positions are different between editing and printing. This can be corrected by adjusting the top position in the at-rule style as follows:
<style controlStyle='controlStyle'>
@media screen {
BODY { margin-left:21px; background-position:21px 15px; }
}
. . .
</style> |
If you now load your form in the editor the background picture will have the same alignment as it does when you print. But there’s still a problem; in the designer the top position did not get adjusted. One more addition to a different internal style will fix that. Paste a copy of the at-rule into the style block with the tableEditor attribute. Your three modifications to the view .xsl file are as follows:
<style controlStyle='controlStyle'>
@media screen {
BODY { margin-left:21px;background-position:21px 15px; }
}
. . .
</style>
<style tableEditor="TableStyleRulesID">
@media screen {
BODY { margin-left:21px; background-position:21px 15px; }
}
. . .
</style>
<body style='BACKGROUND-REPEAT: no-repeat' background='backgroundPicture.jpg'>
|
With these three modifications in place, your background picture will align the same in the designer, the editor, and for print. The results can be seen in Figure 3 below.
Figure 3. Following Approach 1, the form aligns to the upper left of the background picture.
This is all great and good so long as you do not make any changes to your form template that would require you to make these changes again. InfoPath often regenerates the standard internal style sheets as well as the inline style on the body element. Constantly battling the designer to keep your modifications is not a pleasant task, and there is an alternative.
APPROACH 2 – ADD A CUSTOM INTERNAL STYLE FOR PRINT MEDIA
The alternative is to leave the standard internal style sheets and the inline style alone and to create your own internal style sheet which will adjust the margins of the body contents over the background picture for print. You do this by adding the following the following code just below the last style element in the view .xsl file:
<style title="BackgroundPicturePosition">
@media Print {
BODY{ margin-left:21px; margin-top:15px; }
}
</style> |
By adding your own at-rule for print media, you overcome the InfoPath designer roundtripping issue. The results are shown in Figure 4. Either way will work, but the latter alternative is safer and less work. For more details on internal style sheets, refer to Add a Custom Style Sheet to a View.
Figure 4. Following Approach 2, the form aligns to the background picture with margins.
©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.