Creating floating forms

Anvil Q&A
1

Is it possible to show context menus or generic forms on a specific position of a form, floating above other things?

I would like to create a custom component that shows the graphic representation of an item, let’s say a cart item in an e-commerce site. The CartItem custom component should have a few links/buttons that open context menus that allow to open new little forms with the details or other info.

Something similar to this: a repeating panel with CartItem forms:
image

Click on the info button to show the context menu/info form:
image

Then click on the next info button to see the next context menu/info form:
image

2

This is going far outside my comfort zone, but I managed to hack together some floating components by using Anvil roles and a bit of CSS (a bit is all I know).

I realize you’d need something more flexible, but I thought I’d take a stab at part of it at least.

sc

I created three roles, added some CSS to control the positioning, and then set the respective roles in the properties pane.

sc
sc.png460×629 19.1 KB 

.anvil-role-low_float {
 position:fixed;
  left: 45px;
  top: 45px;
  z-index: 30;
 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.anvil-role-lower_float {
 position:fixed;
  left: 25px;
  top: 25px;
 z-index: 20;
 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.anvil-role-lowest_float {
 position:fixed;
  left: 5px;
  top: 5px;
 z-index: 10;
 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}



Here’s the app:
https://anvil.works/build#clone:TADYADSRTSAUWNGE=OH7DDLOPJ5SJWYJMAIUUOGFP

2 Likes
3

Great example. I feel like anvil could be marketed to CSS folks as a tool for easily turning their designs into functional web apps.

1 Like
5

Have you tried using an XY Panel? Components in XY Panels can be overlapped. The latest-added component appears on top.

image
image.png894×304 20.2 KB

1 Like
6

I need something that works on top of repeating panels, data grids and everything else.

7

You can nest an XY Panel inside a RepeatingPanel or a Data Grid, is that what you’re looking for?

image
image.png233×511 13.1 KB

https://anvil.works/build#clone:LMRLKODZVMU6NE7Z=FEVRJFZCJ5K252CHWUSZCIIB

1 Like
8

Very cool. I didn’t know that.

9

Shaun, if you look at my first image, you see the chicken and turkey forms in the repeating panel/data grid with the floating forms on top of them.

I don’t want to see everything in the page shifting down because I click on an element and I don’t want to create XYPanels only because I might need to show floating forms on top of them.

Look at the gear button on the Anvil IDE:
image

I don’t know how that thing works (that’s why I use Anvil :slight_smile:) and I would like to do something like that with a floating form that appears on a specified position, usually the mouse pointer position, and can be larger than the list/form/xypanel it appears on top of.

I will give campopianoa’s suggestion a try and see how far I can go with building a custom component with some javascript to get the position of the mouse and set the position of the floating form.

1 Like
10

@stefano.menci The gear button example you mention is similar to a chat box I created once using the method above. That is, the user clicks something and out pops a floating list/form. If I understand correctly, you would just need one more level of nesting. I didn’t have to use JS (thankfully, since I don’t know how), and positioning was a bit finicky, but that was likely my own misunderstanding of CSS.

2 Likes
11

Yes, that’s similar to what I need.

In your case you have only one form and it always appears on the same position, so you don’t need to worry about the position of the mouse.

I would like to follow either the position of the mouse or of an existing tag and to allow to get an unlimited number of forms.

12

Hi, do you have any demo version of your chat app to share ? I am trying to make something similar and I like the way you made it :slight_smile:

13

I’d like to share it but I made it so long ago that it could probably be implemented in a much cleaner way.

I’m sure you could design something better from scratch rather than looking at my code in this case.

The actual chat box is just a repeating panel. The messages are in their own table with an associated hex color based on user. When a new message is added, I check if the user has given a message before. If not, I generate a new color from a palette that I like and give it to that user, and so on. The messages, colors, and other details are returned in reverse order based on a time stamp.

Other than that, the only other thing to do is make the floating chat button and chat window as described in this thread.

Sorry I couldn’t be more helpful.

14

OK I am going to play with that, thanks !

1 Like