Skip to main content

Scrollable container

Arrange and display information within a fixed-size area with smooth scrolling.

Yuliia Skrybantovych avatar
Written by Yuliia Skrybantovych
Updated over a week ago

The SCROLLABLE CONTAINER component serves as a placeholder for arranging and displaying information within a limited space in e-Detailers. This component allows you to:

  • Optimize content display. Organize large amounts of content inside a fixed area while maintaining a clean design and ensuring key messages remain clear.

  • Improve engagement. Present information progressively, keeping the focus on key messages while making supplementary details accessible.

  • Enhance user experience. Streamline navigation through extensive content while ensuring readability across different screen sizes and orientations.

  • Support responsiveness. Adjust content within a scrollable frame to fit different screen sizes instead of scaling a slide.

  • Ensure compliance. Display mandatory legal or medical information without disrupting the primary content flow, reducing the need for multiple slides.

The component is available on demand. Contact the administrator to get the template with SCROLLABLE CONTAINER.

You can change the scrollable container position, set its style, assign actions, animate, configure inner components, and move the grouped unit.

To add SCROLLABLE CONTAINER to your e-Detailer, drag it from the Components tab on the elements panel to the slide.

To fill the container with components and customize them:

  1. Go to the Components tab on the elements panel.

  2. Find the required component and drag it into the container on the layout.

You can place components outside the slide layout and modify them as needed. However, they will only appear in the content item presentation if they are inside the SCROLLABLE CONTAINER component. To view these components within the SCROLLABLE CONTAINER, use the Editor PREVIEW mode or Viewer.

3. Select the added component on the layout and edit it as usual:

You can find and select the scrollable container with its inner components on the Tree tab.

To customize the scrollbar, select the scrollable container component on the layout and go to the Properties tab.

Here, you can configure the following:

  • SCROLLBAR VISIBILITY—Select when the scrollbar appears on the component within the
    e-Detailer presentation: Always or On hover/scroll.

  • TRACK COLOR—Set the color and opacity of the entire scrollbar track.

  • THUMB COLOR—Set the color and opacity of the draggable section within the scrollbar.

To remove the track or thumb color, click .

The scrollbar appears once you add at least one component to the container and adjust the scrollable area.

To set the container areas for immediate display and scrolling within the e-Detailer presentation, select the scrollable container on the layout. As a result, the Visible area and Full scrollable layout controls on the left side of the component are expanded. Click the required control to do the following:

Control

Action

The control is selected by default.
- Adjust the container area immediately visible on the slide.
- Hold down the control and drag the grouped unit to the required position on the slide.

The control becomes available after adding a component to the scrollable container.
Adjust the scrollable area of the container.

You can preview the customized scrollbar, immediately visible area, and scrollable area in the Editor PREVIEW mode or in Viewer.

Did this answer your question?