Explanation of the overlay options: unset, auto, visible, hidden, scroll

 

Alright, now let’s talk about the overlay option in the context of CSS properties (since Frappe Builder often wraps or exposes CSS properties), especially when you're styling elements or components in Frappe’s UI builder.

If you see options like:

• unset

• auto

• visible

• hidden

• scroll

These are most likely related to the CSS overflow property, or similar display/visibility/scroll behavior on elements.

Let’s break them down one by one

1. unset

• Meaning: Resets the property to its default value, depending on whether the element normally inherits the value from its parent or not.

• Use: If you previously set overflow: hidden or visible, and then choose unset, Frappe will return it to the browser's default behavior.

2. auto

• Meaning: Scrollbars will only appear when needed (i.e., when the content exceeds the size of the container).

• Use: Lets the container automatically manage scrolling based on content size.

3. visible

• Meaning: Overflow content will appear outside the boundaries of the element. It won’t be clipped or hidden.

• Use: To allow larger content to remain visible even if it overflows the container.

4. hidden

• Meaning: Any content that overflows the element will be hidden and cannot be scrolled.

• Use: Typically to maintain a clean UI and prevent content from spilling outside its box.

5. scroll

• Meaning: Scrollbars are always visible, even when the content doesn’t overflow.

• Use: To ensure users know the area is scrollable, or for consistent layout (e.g., aligning grid elements whether or not they need scrolling).

How this relates to Frappe Builder:

When you're configuring a component’s display and you're asked to choose from these options, it means you're deciding how the content inside that component should behave if it exceeds the container’s boundaries.

This usually appears in sections like Layout / Style / Overflow / Advanced Styling.

Example:

Let’s say you have a div inside a card filled with a lot of text. If you set:

• overflow: hidden → any text that overflows will be clipped.

• overflow: scroll → you can scroll the content, even if there's not much in it.

• overflow: auto → a scrollbar appears only when the content overflows.

If you’re seeing these options in a different context (not related to overflow), feel free to share a screenshot or describe the UI section — I’ll help you figure it out more precisely. But from the terminology, it clearly maps to CSS overflow behavior.