Floating fixed position form

Anvil Q&A
1

I am trying to create a custom component that allows to show a form on top of the rest of the page and behave like a context menu. Long time ago I asked this question. I got some interesting feedback, but I never used it until now.

Here is what I have done:

Floating%20fixed%20position%20form
Floating fixed position form.gif780×176 323 KB

https://anvil.works/build#clone:PCDJ4YL7ROKELNIM=6B3EORIHWX7HVODS35IEYWKA

It is promising, but I still have a few questions:

  1. When I click on the Open me again button, another fixed form is shown. The new form works well, but the onmouseleave event of the first form stops working.
    Why does the listener of the first form stop working?

  2. I have used a CustomHTML form with as little HTML as possible, just enough to identify it from javascript and to be able to contain an Anvil form. I also added a Label with a unique text that allows me to identify this specific instance from javascript.
    Is the custom form HTML correct?

  3. The fixed form has no margins on the sides and a little margin on top and bottom; the area between the form and the border is transparent and I don’t like it.
    What is the right way to manage the border?

2 Likes
2

I’ve had a play and this is what I came up with:
I’ve moved the custom js to the native libraries
https://anvil.works/build#clone:IFG6GDQO2DUSJCRP=5USA5HVM3O2FO4PX4KAQ7Z5U

In this example, you share the component_id between BlankPanel and CustomHtml
The parent is also known
the javascript function reinstateBehaviour gets called by the child when it is removed and reinstates the behaviour for the parent

To Answer Question 3 - it’s the content panel that has the transparent margin top and bottom.

  • You could assign the content_panel in the CustomHTML Form a role - and add this to the theme.css
  • Or in the CustomHTML’s HTML editor add a style tag

edit: with gif

3

I’ve had another play and cleaned up the code.
In the native libraries, there is the window event listener.
Otherwise, all the js is in the custom HTML form - FloaterForm.

https://anvil.works/build#clone:KJRXQXAC5Z75JRL7=H26H4MFQRI6WJEFYXSHNRGKO