In Yeeflow, each control on the form designer or dashboard page designer comes with a position setting option available under the Advanced tab of the control's properties settings. These position settings include Static, Relative, Absolute, Fixed, and Sticky.

While these terms might sound familiar to those who have used CSS for web development, Yeeflow makes it easy by allowing you to apply these concepts without needing to write any custom CSS. Let's explore what each of these settings means and when to use them.

The Static position is the default setting for all controls. When a control is set to Static, it follows the normal flow of the page. This means the control will appear in the order it is defined, without any special positioning rules. There are no specific offsets applied, and it does not respond to any top, left, bottom, or right properties.

When to use Static: Use this when you want the control to stay in its default position, without any advanced positioning modifications. It ensures simplicity and keeps the control aligned with the natural flow of other controls.

The Relative position allows a control to be positioned relative to its normal position. You can use the top, left, right, or bottom properties to nudge the control from where it would naturally appear. However, the space originally occupied by the control will still be reserved in the layout.

When to use Relative: This is useful when you need slight adjustments for a control to fine-tune the layout while preserving the overall space that the control takes up.

The Absolute position allows a control to be positioned relative to its nearest positioned ancestor. If there is no ancestor with a specific position setting (like Relative or Absolute), it will be positioned relative to the page itself. Controls positioned with Absolute are taken out of the normal document flow, meaning they won't affect the layout of surrounding elements.

When to use Absolute: Use this when you need precise control over the placement of a control without affecting the positioning of other controls. It’s perfect for overlays, floating controls, or positioning a control exactly in a specific location within a container.

The Fixed position allows a control to be positioned relative to the browser window, meaning it stays fixed in place even when the user scrolls the page. The control’s position is based on the viewport, and it does not move as the page is scrolled.

When to use Fixed: This is ideal for elements that need to stay visible at all times, such as a sticky header, a floating help button, or a navigation bar that should always be accessible.

The Sticky position is a hybrid between Relative and Fixed. A control with Sticky positioning behaves like a relatively positioned control until the user scrolls to a certain point, after which it “sticks” in place like a fixed control. It’s context-dependent and only sticks within a specific container when certain conditions are met.

When to use Sticky: Use this for controls that need to remain visible while scrolling within a specific section, such as headers for tables or context-sensitive menus. It provides a balance of flexibility and responsiveness, ensuring that key controls are easily accessible without being obtrusive.

The Position settings in Yeeflow offer a lot of flexibility when designing forms and dashboards, giving you precise control over the placement of your controls. While these settings correspond to common CSS positioning concepts, Yeeflow simplifies their application, allowing you to visually configure layout behavior without the need for coding.

These tools can make your forms and dashboards not only functional but also visually intuitive and interactive.

Experiment with these settings in Yeeflow to see how they can make your designs more dynamic and engaging—all without writing a line of code! 😊