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

Developer
21

Hi, Can you Please paste here the HTML, JavaScript and CSS code for this custom widget?

22

Sure… but as i told you before, this is just a basic button.

<button onclick="alert('TEST');">TEST</button>

This is only a workaround, positioning the custom widget as small as possible over the tulip fields so the user has more “space” selecting the right field.

23

Hi, not about the Button widget, I want the code of below image custom widget which one you shared already in above post.

image
image468×354 19.5 KB

24

Ah!, that is a simple datalist :

HTML

<input
  type="text"
  id="userQuestion"
  list="preQuestions"
  size="50"
  placeholder="enter your question about your chosen project.."
/>
<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>

JS

var inputField = document.getElementById("userQuestion");
inputField.addEventListener("change", (event) =>
  fireEvent("userQuestion", event.target.value)
);
25

So… a experimental solution for this is to create a raster containing the custom widget and the required coordinates for this. Then you can place the widget on full screen behind the tulip fields and dispatch the click event by yourself.

For example :