Free Form Positioning, also known as absolute positioning in CSS, allows for flexible placement of elements within the Jebbit experience. It enables elements to scale across different device sizes by anchoring them a specific number of pixels from the edge.
Step-by-Step Guide
Select the container element within the screen editor > Click on the three dotted dropdown menu.
2. While all elements default to 'auto-position' you can select "Free Form Position."
3. When Free Form Positioning is activated, the element can be centered on the screen and positioned anywhere. Position Anchor controls will appear on the left panel. This mode replaces standard % based sizing controls with static Px inputs to prevent element overlap on various devices.
Position Anchor Settings
Vertical / Horizontal - You can use the vertical and horizontal arrows to quickly place your element at the top, bottom, right, left or center. The alignment arrows will place the element container all the way to the edge. From there, you can use the 'distance' control to move the elements around.
Sizing - If the button is positioned at the bottom with a vertical setting of '40' and a horizontal distance of '10', it will be located 10 pixels to the right and 40 pixels from the bottom. This positioning ensures the button remains consistent across different devices and screen sizes.
Frequently Asked Questions
Q: Does Free Form Positioning work with Style Independently?
A: Yes! You have full control to turn on Style Independently and use free form positioning to ensure the placement of your elements look perfect across both devices.
Q: What happens if I turn it off?
A: If you turn Free form Positioning off, the element will snap back into place into the same position it was before.
Q: Is Free Form Positioning ADA compliant?
A: Yes it is. A screen reader will be able to detect the order of the elements
Q: Can elements overlap?
A: Yes they can. You need to be careful with the way your elements are positioned. In fact, as a best practice, particularly for buttons, if you turn on free form for one button, you'll want to turn them on for all buttons, because the sizing of the buttons will change with this new positioning type.
Related Articles
Keywords: free form, positioning, placement, elements