The Spacer Component does exactly what it sounds like: it adds space to your form, ensuring that other components have room to breathe! Use this to control the alignment and positioning of components by adjusting its width, so everything stays clean and organized.
Example Spacer
Use these to create space between components, helping with visual alignment and layout.
Below, a spacer is used to right-align the Total Hours component with the Hours column from the table.
Use these to create space between components, helping with visual alignment and layout.
Below, a spacer is used to right-align the Total Hours component with the Hours column from the table.
When should I use a Spacer?
This component is perfect for scenarios where you need to fine-tune the layout of your form. Here are some common use cases:
Align Components
Like in the example image above, push components to the right or separate them visually.
Like in the example image above, push components to the right or separate them visually.
Fill Gaps
Prevent layout shifts when components are conditionally hidden by display logic.
For example, if you have a row of components with display logic applied, and you want them to retain their position whether they are hidden or shown, you can set up a Spacer Component to display when its partner component is hidden.
Prevent layout shifts when components are conditionally hidden by display logic.
For example, if you have a row of components with display logic applied, and you want them to retain their position whether they are hidden or shown, you can set up a Spacer Component to display when its partner component is hidden.
Features & Configuration
Adding a Spacer component to your form is easy. Simply select the Spacer option from the component library and drag it onto the canvas.
After placing the component, you can customize its properties in the right-hand panel:
Properties
Width
Adjust the width of the component (1-12 columns) based on your form layout.
Adjust the width of the component (1-12 columns) based on your form layout.
Height
Adjust the height of the component (in pixels).
Adjust the height of the component (in pixels).
Logic
Display Logic
Control when this component shows or hides based on other inputs.
Control when this component shows or hides based on other inputs.
Details
ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article