Bug? button doesn't align properly in hover dropdown component

[avm]

I’m pretty sure this is a bug. Even when I align left the Hover Dropdown and Button elements, the button remains center aligned

[Joyce]

Hi @avm,

Not sure if this is a bug or intended, I’ll check with the tech team.

In the meantime, if you go to the parent container Answer group and choose the left alignment there, all its children elements, including the dropdown menu, should be aligned to the left:

Does that help?

[avm]

I’ll keep that in mind. Ended up starting to rebuild the dropdown with my own custom configuration of different elements.

Here’s another element I had a similar issue with. I can’t figure out how to get the text of the date picker to fill into the parent container

[Joyce]

Noted, thanks!

[avm]

So I made an element, which is a handful of divs, texts, etc combined. It functions like a dropdown where the results list will show/hide by changing a variable on click (on the ‘button’).

But I can’t figure out how to close these results if the user clicks anywhere else. Like if the user clicks on blank space in the nav bar, or elsewhere on the page (I believe this is default functionality of all the other normal elements). Of course I can change the boolean on the ‘button’ var but wondering clicking elsewhere.

Also tried the left-alignment suggestion but wasn’t able to get it working.

[avm]

@aurelie I think I am close to a solution for creating “click outside & close” behavior

I can get the click event to register in the console, but am trying to figure out how to get the element to close. I tried an action of switching the variable to hide after the JS function but it creates conflicting show/hide actions and doesn’t actually show.

I thought about adding a parameter to pass into the function for the UID of the variable (that controls the show/hide). Would that work? How do you pass in a parameter into the javascript? function handleClickOutside(event, variableUID) - variableUID returns undefined.

Also I thought of making the variable that gets passed in the function false to hide the element

Would love to hear your thoughts!

function handleClickOutside(event) {
  // Get the dropdown element
  const dropdown = document.querySelector('.relatedRecordDropdownContainer'); // Replace with the appropriate selector for your dropdown element

  // Check if the clicked element is a child of the dropdown
  if (dropdown && !dropdown.contains(event.target)) {
    // Log to the console
    console.log("clicked!")   
    window.removeEventListener('click', handleClickOutside);
    return  

    // Hide the dropdown by setting the controlling variable to false
    // Use your weweb.io function to set the variable
  }
}

// Add an event listener to the window object that listens for clicks and calls the handleClickOutside function
window.addEventListener('click', handleClickOutside);

// Remove the event listener when the dropdown element is destroyed (if necessary) to prevent memory leaks
// You may need to call this line of code when the dropdown component is destroyed or when it's no longer needed

[aurelie]

The best is to configure a workflow, and emit the trigger event on your custom code.
Then on the editor, you change a variable and use it to control the display (bind the display to the variable)

[avm]

Hi Joyce, any update with this?