Enabling dynamic resizing of RTF fields

You can enable dynamic resizing of RTF fields so that the fields resize to fit the current contents as a user is entering information (text or images), and scroll bars are not required. To enable this type of resizing, the RTF fields must be in a panel with flow layout. To avoid the horizontal and vertical scroll bars on the RTF field, set the display property Custom CSS to RTFPanel.

To enable dynamic resizing (horizontally, vertically, or both) of RTF fields

1. Create a panel that will contain the RTF fields.
    For more information, see the Creating-panels and Creating-panel-holders sections.
2. Resize the panel so that it is large enough to hold the RTF fields.
3. Set the following properties for the panel:

   • Set Layout Style to Flow.
      When you set this property, the panel can contain only one field per row.
      Tabbed Panel Holders support the Flow Layout Style; however, if an RTF grows dynamically, a scroll bar will not appear on the tab. Consequently, users cannot see fields that disappear at the bottom of the panel because of the resized RTF.
      Additionally, if you add a gradient color (Background Color property) or an image (Background Image property) to a panel that includes an RTF field, the color or image might not extend to the bottom of the panel when Flow is selected for the panel's Layout Style property.

     Note

     When you select Flow as the Layout Style property for a panel, the fields in the panel are left-aligned and vertically spaced equally. If you add another field after setting the Flow option, that field will not be properly aligned until you select the Flow option again.

   • Set Vertical Spacing to the number of pixels of space between each field in the panel.
   • (Optional) Set the following properties to create margins around the fields in the panel.
     • Panel Bottom Margin
     • Panel Left Margin
     • Panel Right Margin

     • Panel Top Margin

       Note

       These Panel Margin properties are not supported on Tabbed Panel Holder fields.

4. Create RTF fields in the panel.
    For more information, see Adding rich-text-formatting capabilities to a character field.
5. Set the following properties for each RTF field within a panel:
   • Set Auto Resize to Vertical, or Horizontal, or Both, depending on the content expected in the RTF field. Select Both as this option displays the vertical and horizontal scroll bars on the panel.
      If you set the RTF field to grow Vertically, the field does not show vertical scroll bars. Similarly, for the Horizontal scroll bars. If you select Horizontal or Both, set the Custom CSS property to RTFPanel.

   • Set Maximum Height to 0 (no limit) or to a number that is equal to or greater than the field's Height property.

     Note

     While editing contents of the RTF field, scroll bars appear on the RTF field if the contents of the field exceed the maximum limits specified in the display properties.

     
     Scroll bars might appear while editing the contents of the RTF field. These scroll bars disappear when you tab-out of the RTF field. When a large image or text inside the RTF field is removed, the scroll bars on the panel disappear and the RTF field and its contents resize to the dimensions specified in the display properties.

     Important

     For the RTF fields to grow horizontally and vertically, set the Custom CSS display property to RTFPanel.