Page Breaks (when printing form)

Forums Dynamic Forms for SharePoint Page Breaks (when printing form)

This topic contains 10 replies, has 2 voices, and was last updated by  Alexander Bautz 1 week ago.

  • Author
    Posts
  • #22951

    Paul Lynch
    Participant

    Hi Alex,

    I have a form with a few tabs. When you create and edit you fill in these tabs.

    But on the Displayform.aspx. I have all these separate tabs sections laid out in one giant tab. Then I added button to Print the page.

    My problem is that when I print (in Chrome) the page breaks are pretty random. They sometimes cut off text or section titles halfway through.

    I guess I need to manually enter some “page breaks” somewhere but not sure exactly how.

    The CSS or Class name is tabH1

    And I think I need to add something like this

    .tabH1 {page-break-before: always;}

    But I am not sure if this is correct or where to add it.

  • #22953

    Paul Lynch
    Participant

    Btw if I add the “Print Tab” option in DFFS, it will print the whole form, but it drops all the formatting so where you have long questions in the form, the text wraps up so small it is really hard to understand the form.

  • #22954

    Alexander Bautz
    Keymaster

    I’m actually not sure if this will work because it’s all inside a table and I’m not sure you can force a line break in a table.

    Please note that for the CSS to affect the printout (when using the Print active tab setting) you cannot load an external CSS file or use classes from SharePoint in general – all CSS must be in the Custom CSS tab.

    Alexander

  • #22994

    Paul Lynch
    Participant

    Ok thanks that is good knowledge.

    So potentially I can add CSS to the “Print Active Tab” by placing it in the “Custom CSS Tab” and change the format to make it look pretty?

  • #23000

    Alexander Bautz
    Keymaster

    Yes

    Alexander

  • #23006

    Paul Lynch
    Participant

    It seems to drop all formatting though when I click on the DFFS print button. I’m not sure how to grab the CSS classes from the print preview in order to add them into the CSS tab.

    Also I notice the vLookup table disappears/do not render.

    So guess that option is out?

  • #23008

    Alexander Bautz
    Keymaster

    I’m not sure I understand – can you show me some screenshots of the tab you try to print and how the actual printout looks?

    Alexander

  • #23026

    Paul Lynch
    Participant

    Sure I will post

    1) original form in browser (chrome)
    2) Browser standard “print page” button (print preview) – shows up vlookup (but cuts off text due to HTML table).
    3) DFFS print tab button – showing up as generally unformatted text, also does not show up the vlookup table from the form. Does not cut off text though!

  • #23031

    Paul Lynch
    Participant

    Sorry I need to update, actually in IE, the DFFS Print tab is picking up and showing the vLookup table (just Chrome that isn’t).

  • #23033

    Paul Lynch
    Participant

    I think rather than page breaks, I think using the DFFS print tab is the way forward here.

    Main issue now then is that text is cut off when I go to print the form. (see image).

    Is there a way I can use CSS to limit or resize the form/tab to ensure no text is cut off e.g. forcing a max-width of the form?

    Ideally I’d also like to be able to put the headings in bold and increase the width of the left questions columns (but no CSS seems to work when I print).

  • #23048

    Alexander Bautz
    Keymaster

    If the form is wider than ~720 pixels it will not print in a portrait page. You might be better off design a dedicated print tab in DFFS and layout the form in a narrower layout. If not you can try changing to landscape mode when printing. In Chrome you can use some CSS to force landscape like I have show below.

    Here are some examples:

    @media print{
        // Set label column width
        .ms-formlabel{
            width:200px;
            white-space:normal;
        }
        // Set table width to try narrowing the form when printing
        .dffs-print{
            max-width:720px;
        }
        // Chrome - set landscape mode
        @page {
          size: landscape;
        }
    }

    Alexander

You must be logged in to reply to this topic.