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.
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
@Horesh : If i understand you correctly you can simple use your custom widget as separate layer. For example drag your widget at the full size of your app page and then set the tulip fields at the widget. I have tested your behavior in my pdfwidget : set this as background, add tulip fields and use both type of fields. @thorsten.langner : in my test the custom widget the tulip fields are completly usable.
This only applies, when the custom widget is behind the TULIP Widgets. If a TULIP Button is behind the custom widget, it will not be clickable… (the custom widget overlaps it always, also if it is “empty”)
e.g. you can not make a modal as custom widget, because:
if the reserved space for the custom widget is in front, everything behind it is never usable
if the custom widget is in the back, the modal will be behind the widgets and not readable (and it will not block the access to the widgets)
if the custom widget is to small, the modal will not appear fully…
Okay but why can’t you set the widget behind the tulip widgets?
" * if the custom widget is in the back, the modal will be behind the widgets and not readable (and it will not block the access to the widgets)" What do you mean with that?, i thought your origin question was about a dropdown menu innerhit in your tulip app… so whats the issue?, if i set up my widget behind the tulip widgets and i define a for example clicklistener for my custom widget i can trigger this and the tulip widgets are placed on another room at the custom widget… or did is miss something?
If you want to achieve the second screenshot, it will ALWAYS overlap the inputs, also, if the dropdown is collapsed. (The iframe will still be there). So you can not type in your name…
The Idea is, to have a widget, that only overlaps the other space, if needed (e.g. activated or expandet…)
It’s simple datalist instead of select i guess…
<datalist id="preQuestions">
<option value="Was soll ich als nächstes tun?"></option>
<option value="Welche Meilensteine erfordern meine Aufmerksamkeit?"></option>
<option
value="Gibt es Risiken oder Probleme, die ich ĂĽbersehen habe?"
></option>
<option
value="Wie kann ich die Teamleistung verbessern oder motivieren?"
></option>
<option
value="Welche Best Practices gibt es fĂĽr ein Projekt wie dieses?"
></option>
<option
value="Wie kann ich sicherstellen, dass das Projekt im Zeitplan und Budget bleibt?"
></option>
</datalist>
I tested also a standard select… it works also in tulip player…weird. both type of “Options” should be available in all browsers… we use edge what do you use?
You are right,
html-elements with inherent spill (tooltips and selects) seem to have the ability to overflow the iFrame, I guess it would even overflow the player window border…
But as soon as you build something by yourself, and you want to hide and display it, you will come in trouble (as with the standard widgets as well.)
