PDF: making text fields grow to accommodate text

Note: 5-5-14 I updated this document today, adding another sample below.
Note: 1-25-11 I updated this document today, adding another quote from the original article and a quote about saving as a dynamic PDF.

Creating a dynamically expanding pdf is something that I’ve tried several times over the last two years with no success until now.
Google results are littered with the sad stories of others attempting this and being shut down.
I even contacted the instructor of the advanced Acrobat Pro/Live Cycle Designer course, to no avail.

The goal is to create a form that includes expandable text areas and when the they expand the rest of the content adjusts to accommodate them. Ideally these fields would even allow content to break across pages.

Along the way I would frequently find encouraging check boxes or form properties like “expand vertically” or “dynamic” vs. static pdf; nothing quite worked.
The check the box to allow text to vertically expand by itself is great, unless you want to print the form… the content that goes past the text box, is hidden and a plus sign denotes that something is there… Pretty much useless…

Last month I found an article by Stefan Cameron (forms.stefcameron.com) that described some script that allowed fields to grow horizontally to a max width. It seemed reasonable enough and I was impressed, but when I tried to apply the code to a vertical growth it merely expanded over the top of the content below it.
Arg…
At that point I started creating code that capture the position and height of the previous element and move everything down the page when ever a text field expanded. That code didn’t go anywhere fast and it seemed like it was going to be a nightmare to find all the necessary functions and tags to achieve it.
I’m glad I abandoned that project.
Adobe provides examples of inserting new fields in documents and that the adjacent content in those documents moved out of the way as the fields were inserted. So I knew there was an internal function that allowed for some document flow, but what was it?
This week I was inclined to try again and upon revisiting Stefan Cameron’s site I found something that caught my eye: flowable layout. It seemed possible that we could achieve our goal.

After a bit of testing and reading through pages of comments I created two working documents that do indeed expand and flow! The key is to follow all the necessary steps and it can be done! And no scripting was required.
This is seriously exciting!
Here’s the comment that summed it all up: (forms.stefcameron.com/2006/07/24/previewing-as-dynamic-pdf/#comment-83939):
@Craig Lambson,
The key to making the text fields grow to accommodate text is to:
1. Make them multiline (Object palette > Field tab > Allow multiline property).
2. Make them expandable in height (see “Making a Field Expandable” here).
3. Put them in a flowed subform (that is, a subform whose “Object palette > Subform tab > Content property” is set to “Flowed”) that allows page breaks within its content (via the “Object palette > Subform tab > Allow Page Breaks within Content property”).
4. Allow their contents to break across pages (Object palette > Field tab > Allow Page Breaks within Content property).
Note that all subforms that ultimately contain the text fields (i.e. all subform containers up to the root subform which are parents of the text fields) must be flowed and must allow page breaks within their content.
I also address an issue with content that gets cut-off at the bottom of a page in my MAX 2007 Tutorial by placing the content directly inside the root subform which is flowed by definition.

Oh boy, thank goodness for Craig Lambson’s question and Stefan’s concise answer.

To put that in context: you must edit your form in LiveCycle Designer (I’m using V.8). You won’t find those options in Acrobat Pro.

The main article itself is invaluable; it’s a check list for ensuring your dynamic form is indeed dynamic!
1. If you haven’t saved your form, make sure the Preview Type is set to “Interactive” and that the Default File Type for New Forms is set to a dynamic PDF format. You may also want to set the XDP Preview Format to a dynamic PDF format while you’re at it.
2. If you’ve saved your form as a dynamic PDF, make sure the Preview Type is set to “Interactive”.
3. If you’ve saved your form as a static PDF, none of these settings will help you. You must first save your form as a dynamic PDF.
4. If you’ve saved your form as an XDP, make sure the Preview Type is set to “Interactive” and the XDP Preview Format is set to a dynamic PDF format.
5. If you’re tired of running into these problems and want to avoid them in the future, just set your Default File Type for New Forms to a dynamic PDF format.

Here’s my first test document:
FlowableTest.pdf with two comment fields that expand until you grow tired of it! Note: the fields expand after you leave the field.
Screen shot. Here are the empty fields
Screen shot. Here are the empty fields

Screen shot. Here are the fields, one expanded with extra content
Screen shot. Here are the fields, one expanded with extra content

Screen shot. Edit the document in LiveCycle
Edit the document in LiveCycle

Once you’re in edit mode you follow the steps:
The key to making the text fields grow to accommodate text is to:

  1. Make them multiline (Object palette > Field tab > Allow multiline property).
    Make the Text Field Multiline

  2. Make them expandable in height (see “Making a Field Expandable” here).
    Screen shot: Make the Text Field expandable in height

  3. Put them in a flowed subform (that is, a subform whose “Object palette > Subform tab > Content property” is set to “Flowed”) that allows page breaks within its content (via the “Object palette > Subform tab > Allow Page Breaks within Content property”).
    *Note: you can highlight all your objects and use the contextual menu (right click) to ‘Wrap in a subform’.
    Screen shot: Choose the subform and make the layout 'flowable'

  4. Allow their contents to break across pages (Object palette > Field tab > Allow Page Breaks within Content property).
    Screen shot: Allow the Text Field content to 'break across pages'


I have a few other settings that I like too:
Screen shot: Left justify and Vertically Align the content of the Text Field
Screen shot: Left justify and Vertically Align the content of the Text Field

Screen shot: additional settings
Screen shot: Set the width of the field, anchor it: top, left, remove the margins if needed and position the caption with no reserve

My second test was less successful as it involved adapting a current form to use this method of expanding fields. The form was a converted word doc and it basically exploded when I set the layout to flowable. There were so many remnants from word that most of the form was jettisoned off the bottom of the page. It looked like garbage.

Here’s the form before:
Screen shot: a view of the word converted form before flowable layout applied
Screen shot: a view of the word converted form before flowable layout applied

Here’s the form after all the elements are wrapped in a subform and ‘Flowable’ layout is applied:
Screen shot of the form after 'flowable' layout is applied
The form after ‘flowable’ layout is applied

So we resolved to rebuild the form from scratch and it’s working nicely:
Screen shot of the new form created in LiveCycle
Screen shot of the new form created in LiveCycle

A few important (but less obvious) tool windows / panels:
Screen shot: Hierarchy
Hierarchy

Screen shot: tab order
Tab order

Hierarchy is important because the flowable layout (with: ‘top to bottom’ flow direction) relies on the order of the elements for positioning. For example, inserting a text box automatically adds it to the bottom of the document. Hierarchy allows you to put it in your desired location. Tab order is valuable for the same reasons.

The last points I’ll mention are margins, pages, tables, a workflow suggestion and a note about Reader:

  • Margins: You’ll need to use each elements’ margins for spacing.
    Every text box, field, table and line will be smashed together unless you space them out with margins.
    The other option is to insert subform with the content ‘Positioned’ into your flowable subform. In these sections you can move things around as you see fit. I found this valuable for pasting in strangely formatted content from word when it didn’t have any form fields in it.

  • Pages:
    One interesting limitation in pdfs is that subforms cannot extend past the existing page. So each page must have it’s own flowable subform. I tried repeatedly to highlight all the content on my 3 page form and put it into one subform but that was fruitless.

  • Tables: Tables are archaic in LiveCycle. Only one element can go in a row so you have experience building web pages a dozen years ago you’ll be a pro. In order to make things appear as if there are multiple fields or descriptions in a table row you have to manipulate borders across multiple rows and columns. Personally I’m glad I already created these nero-pathways.

  • My workflow
    In the end I needed to create a dynamic pdf from scratch in LiveCycle and use an existing pdf as the model.
    For my workflow I opened the model in acrobat pro and was able to quickly switch back and forth to check my positioning and highlight, copy, paste content. As a rule I don’t re-type anything, it only creates an opportunity for error.

  • Reader
    As with any PDF form the most important point (especially for the end user) is that they can ‘Save’ the finished document. Printing and emailing is good but allowing them to save is courtesy that I consider a necessity. To do this, open the finished form in Acrobat Pro and navigate to the ‘Advanced’ menu. Then choose ‘Extend Features in Adobe Reader’. And save the document. I always save over my existing document. It converts back later if/when you need to make edits.
    Screen shot: 'Exte<u>n</u>d Features in Adobe Reader'.
    Screen shot: ‘Extend Features in Adobe Reader’.


That’s it. Winter PDF Magic!
Just don’t forget to save it as a Dynamic PDF: Screen shot of Save As dialog.

Samples

Comments
  • Rob says:

    All this advice is great thanks, and is still relevant to CS6.

  • ArrueiraV says:

    Thanks for the walkthrough! The test file is indispensable.

    Do you know if there is a way to get the field to resize as the user creates new lines? With the instructions above the field resizes to fit the content after we click another field (onBlur I would guess).

    • Vid says:

      You’re welcome.
      You’re right, the field resizes ‘onBlur’. I suspect there could be a way to expand the field as the user is typing but since we’re relying on the built-in “flowable” method we don’t have obvious access to the underlying functions and vars. Stefan Cameron (http://forms.stefcameron.com) may have some code that would help.

      • ArrueiraV says:

        Vid,

        One more question if you don’t mind. Do you know if a row can expand to accomodate multi-line text fields in its cells? If it can be done, then what are the settings to achieve that?

        I am using a table in flowable layout with repeating rows. I can probably size the rows to be two lines of text tall but if that height could be dynamic that would be much better!

        Thanks again!

  • Avoidingwork says:

    This figuratively saved my bacon. Thanks for this write up and your example.

    I do have one question that I’m not sure if you answered at the end or not. I will need the end user to save what they have filled in as a static pdf and for them to keep the version that they can edit again.

    We expect the end user to download our pdf; fill it in; submit a version that is static and can’t change; make changes to the original on their computer and then submit that new version as a static pdf again.

    Thanks much.

  • Shannon says:

    I am trying to make my PDF templete form expand in LiveCycle but I have changed everything to flowed except the sheet. when I change that to flowed it all moves to the left and my table and all the content are gone? I dont think I would be able to start this from scratch as it has alot of tables, radio button, check boxes, and drop downs. Is there anything I can do?

  • Smaro436 says:

    Is there a way to make an expanding text field push existing text sideways?

    I’ve created an expandable text field that expands in height and pushes existing text down.

    But I need it to push text sideways. I changed the setting in the text field to width and put a text box with text in it beside it but it just runs right over the text box instead of pushing it to the side.

  • Pa says:

    You should do a video of this and put it on YouTube. There isn’t a very good video out there that tells all this.

  • Arvind Kumar says:

    Oh My God, What a great sample it was. I was wondering about that same from the last 7 days but got nothing on the net and even i failed myself. But you made my day. Thanks alot.

  • Dale says:

    Thank you! This article was awesome and helped immensely!

Leave a Comment