Skip to content

Spacer

The Spacer component is a simple, stylable box that you can use to manage layout within your reports. It is similar to the Separator component but offers more flexible styling.

Configuring Spacer

Customize the Spacer's behavior and appearance to fit your specific needs using the available configuration options.

  • Adding Spacer component:

  • Drag and drop the Spacer component from the components bar onto a page of the report or within a flow.

  • Proceed to customize the component's styling and configuration settings within the right sidebar.

  • Styling: You can define a Background color for the spacer. The Style section allows you to apply custom CSS directly using element.style, providing granular control over its appearance. This is done by entering CSS properties within the element.style { } block, or by using the Edit in Style Editor button for a more guided experience.

  • Repeat: The spacer can be set to Repeat this component based on a Source data path, with an optional Alias (e.g., $it.record) for iterating through data. This is useful for dynamic spacing in repeated sections.

  • Visible Expression: Control the visibility of the spacer using a dynamic expression.

Practical Examples

See how you can integrate and utilize the Spacer in your reports.

  • Adding Space: Use a Spacer to introduce extra vertical or horizontal space between components, improving the readability and overall layout of your report. For instance, you might add a spacer between a chart and a table to provide visual separation.
  • Placeholder: If you're designing a report and anticipate adding a specific component later, you can use a Spacer as a temporary placeholder. This helps maintain the intended structure and spacing of your report during the development phase.
  • Conditional Spacing: By combining the Visible Expression and Repeat options with custom styling, you can create dynamic spacing. For example, a spacer might only appear or expand its size under certain data conditions to highlight specific sections.

Important Notes & Tips

Keep these points in mind when working with the Spacer:

  • The Spacer component is most commonly used for adding space or as a placeholder in your report design.
  • Its simplicity and extensive styling options (including direct element.style manipulation) make it highly adaptable for precise layout control.