Run JavaScript not working when Floating Group (FG) or Popup becomes visible — Calendar Plugin Fix

General
1

I was trying to resize or restyle a calendar plugin (like Air Date/Time Picker Ex) using Run JavaScript when my Floating Group (FG) or popup became visible.

It worked perfectly when the FG was visible on page load,
but not when I showed the FG later using a button click.

Even adding a delay (like 3 seconds) didn’t fix it!

:magnifying_glass_tilted_left: Why it happens

In Bubble, when you use a plugin (calendar, picker, etc.),
the plugin’s HTML structure isn’t rendered instantly when the FG or popup becomes visible.

So your JavaScript runs before the actual calendar exists in the DOM —
which means document.querySelector() finds nothing to style or modify.

That’s why your code works on page load (everything is already rendered)
but not after a visibility change (render happens after the workflow).

:white_check_mark: Solution

Option 1 – Add JS after the calendar renders

If your calendar is input-based (appears only when user clicks the input):

document.querySelector('#dateInput').addEventListener('click', function() {
  setTimeout(() => {
    const picker = document.querySelector('.air-datepicker');
    if (picker) {
      picker.style.width = '100%';
      picker.style.minHeight = '350px';
    }
  }, 300); // small delay after popup opens
});

:magic_wand: Works great with Toolbox → Run JavaScript.

Option 2 – Use a wait loop until element exists

If you’re not sure when the plugin loads:

function waitForPicker() {
  const picker = document.querySelector('#myDatePicker .air-datepicker');
  if (picker) {
    picker.style.width = '100%';
    picker.style.minHeight = '350px';
  } else {
    setTimeout(waitForPicker, 300);
  }
}
waitForPicker();

This keeps checking until the plugin’s HTML appears, then applies your style.

Thanks