Material Template Form in Alert

Anvil Q&A
1

I have some forms which are built using the Material Template and these are displayed using alerts like the documentation:

from ..Form1 import Form1

my_form_instance = Form1()
alert(content=my_form_instance, large=True)

The issue is that the length of the alert is always padded so you need to scroll to see the buttons. Even if zooming all the way out on Chrome, there is still some part of the alert including the buttons that is off screen.

I presume this is so the Template when used as a main form (not an alert) takes up all the screen area.
Is there a way to set the size on the Material Template or should I just convert the forms to the Blank Template? I have tried adjusting padding as described here but the behaviour persists.

Edit:
On a somewhat unrelated note, I found this rather amusing comment in the theme.css
/* Put things on a 4px grid (none of this 7px nonsense) */

2

in terms of the css I think it’s in the .structure class

.structure {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 0;
}

the min-height is set to 100 veiw port heights… i.e. filling the screen… so I would say that a Material Template is not intended for alerts.

You could do the following which would be a little hack to remove the standard html template before displaying the form in an alert

from ..Form1 import Form1

my_form_instance = Form1()
my_form_instance.html = ''  #remove the standard html template from the Form... 
alert(content=my_form_instance, large=True)

If you want Form1 to have the material design inside an alert but not extend the 100 viewport heights - then you’d probably want to use a javascript call with jQuery - something like:

from ..Form1 import Form1

my_form_instance = Form1()
my_form_instance.call_js("change_height")
alert(content=my_form_instance, large=True)

<script>
  function change_height() {
    this.find(".structure").attr("style", "min-height: auto; height: 100%")
  }
</script>
1 Like
3

Thank you Stu, this does the trick of removing all the template and hence makes the alert size to the end of the form with a little padding however it also removes the nicely shaded header bar which is what I liked about this.

Rather than delve in to JS, I’ll have ago at creating a custom class for a title label and report back (this feels like the most Anvil-esque way of tackling it)

Thanks again @stucork

4

Ooh how about this for an anvil-role's solution wiith no javascript :face_vomiting:

theme.css

.anvil-role-alert-form .structure {
  height: 100%;
  min-height: auto;
}

roles:
Screen Shot 2020-02-17 at 13.03.39

code:

from ..Form1 import Form1

my_form_instance = Form1()
my_form_instance.role = "alert-form"
alert(content=my_form_instance, large=True)
2 Likes
5

@stucork #nailedit

… I was still reading up on how to create a role :rofl:
Thanks Stu!

“no javascript :face_vomiting:” - hahahahahah Excellent!

2 Likes