Creating a Custom Widget with Dropdown Menu that Extends Beyond Widget Boundaries

Hi everyone,

I am currently facing an issue while developing a custom widget in Tulip and would greatly appreciate your insights and advice.

I am attempting to create a custom input box widget that, when clicked, displays a dropdown menu with several options for the user to pick from. The challenge I am encountering is related to the size constraints of the dropdown menu. Specifically, Tulip requires that the size of the dropdown menu be defined within the borders of the widget itself.

However, I have noticed that this limitation does not apply to certain pre-built widgets provided by Tulip, such as the Date and Time Picker. In these cases, the widget’s size is defined by the input box, but when clicked, the calendar dropdown opens and extends beyond the widget’s boundaries, maintaining a consistent size regardless of the input box dimensions.

I want to achieve the same functionality with my custom widget, where the dropdown menu can “leak” outside of the widget’s boundaries and display at a consistent size, regardless of the size of the input box.

Is there a way to implement this behavior for custom widgets in Tulip?

Any examples or documentation that could guide me through this process would be highly appreciated.

Thank you in advance for your assistance!

Best regards,
Horesh Lopian

Hi,

I totally agree, that this is a big limitation of custom widgets.
I often felt the need to expand the area of the widget temporarily.

Unfortunately this is not possible yet.
The reason is, that custom widgets are embedded in an iframe. This is for security reasons, so they are not able to influence the original page more, than the boundaries allow (the own sandbox). It can also not read and wirte variables, as long as they are not provided by the App (parameters).

If you want to provide more space, you can oversize the iframe, however you have to decide, if it is in front or behind other widgets around. It can not overlap any inputs or buttons, because they are no longer usable then.

I would love if someone proves me wrong and finds a solution :wink:

1 Like