Creating floating forms

Anvil Q&A
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