Dynamic styles for alerts

I’m sure this is going to be oldhat covered elsewhere, but I found out about this by playing around and it’s super useful!

from anvil.js.window import document

...#do all your init and form_show stuff

def do_me_a_pop_up(self,item,**args):
      self.item = item
      mouse_x = event.pageX
      mouse_y = event.pageY
      offset_x = 50 #adjust as needed
      offset_y = 50 #adjust as needed
      mouse_x -= offset_x
      mouse_y -= offset_y
      style = document.createElement("style")
      rule = f".anvil-role-customalert {{position: absolute; background-color: white; border: 1px solid black; border-radius:15px; opacity: 0.75; padding: 10px; z-index: 1000; left: {mouse_x}px; top: {mouse_y}px; width: auto; height: auto;}}"

You need add a customalert role in the normal way, but don’t need to pop anything in your theme.css.


Hmm, it feels novel to me. I like the idea of being able to put this styling in the Python code rather than the theme.css.

1 Like

Made me very happy to discover it worked!!!

1 Like