Setting Up the Plugin:
Add the Expandable Inputs plugin to your Bubble.io project.
Insert an input field into your Bubble application and set the ID attribute to a unique identifier.
Configuring Properties:

Horizontal and Vertical Expansion:
Set the properties for Focused Width and Focused Height to define the expanded dimensions of the input field.
Choose the expansion direction with Horizontal Direction and Vertical Direction options.

Background Color:
Use the Background Color property to set the background color of the input field when it is focused.

Sound Effects:
Select the sound effect of the sound file in the Sound effects property.

Instructions for Usage:

Fixed Container Requirement:
For the expansion to be visible, the input field must be placed inside a fixed group.
Alternatively, ensure that the length or height of the parent container is not fixed to a certain dimension to allow the input field to expand properly.

Event Listeners:
The input field will respond to focus and blur events, triggering the expansion and retraction animations, sound effects, and background color changes.


For contact support email us at [email protected]