Django widget tweaks popover won't move with content

Question

I'm using django widget tweaks to render a form field that is required. It all works fine, if the field is blank, I see a cute little popover that says field is required and all that, but if I scroll the page (the form is a little big), the popover won't move with the form field. It'll stay put and that is not good.

Here's my code:

{% load widget_tweaks %}

{{form.order_number.label}}
{% render_field form.order_number required="true" %}

Also, this is happening only on Firefox, not on Chrome. I'm on Firefox 57.0. Here's a screenshot to help. In Pic1, you'll see it is supposed to be where I like it without scrolling. In Pic2, it has gone way upwards to the top of the div when I scroll up.

Could someone please explain why this is happening and how I can fix it?

Answer 1

This is the behaviour of the browser when an input has the required attribute, so you can't do much about it (changing the browser's behaviour itself).

What you can do is override the default's browser with some javascript validation library, which let's you customize the type and looks of the messages as you need.

For example http://www.formvalidator.net/