fix modal window

flask_admin/static/admin/js/bs4_modal.js

@@ -2,3 +2,8 @@
 $('body').on('click.modal.data-api', '[data-toggle="modal"]', function () {
     $($(this).data("target") + ' .modal-content').load($(this).attr('href'));
 });
+
+$(function() {
+  // Apply flask-admin form styles after the modal is loaded
+  window.faForm.applyGlobalStyles(document);
+});

flask_admin/templates/bootstrap4/admin/base.html

@@ -78,13 +78,13 @@
 {% endblock %}
 
 {% block tail_js %}
-    <script src="{{ admin_static.url(filename='bootstrap/bootstrap4/js/popper.min.js') }}" type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='2.1.4') }}" type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='bootstrap/bootstrap4/js/popper.min.js') }}" type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='bootstrap/bootstrap4/js/bootstrap.min.js', v='4.2.1') }}"
             type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.9.0') }}" type="text/javascript"></script>
-    <script src="{{ admin_static.url(filename='vendor/bootstrap4/dropdown.js', v='4.3.1') }}" type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='vendor/bootstrap4/util.js', v='4.3.1') }}" type="text/javascript"></script>
+    <script src="{{ admin_static.url(filename='vendor/bootstrap4/dropdown.js', v='4.3.1') }}" type="text/javascript"></script>
     <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='4.2.1') }}"
             type="text/javascript"></script>
     {% if admin_view.extra_js %}

flask_admin/templates/bootstrap4/admin/model/modals/create.html

@@ -5,20 +5,32 @@
 {% set render_ctx = h.resolve_ctx() %}
 
 {% block body %}
+
   <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    {% block header_text %}<h3>{{ _gettext('Create New Record') }}</h3>{% endblock %}
+    {% block header_text %}<h5 class="modal-title">{{ _gettext('Create New Record') }}</h5>{% endblock %}
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
   </div>
+  {% call lib.form_tag(action=url_for('.create_view', url=return_url)) %}
   <div class="modal-body">
+        {{ lib.render_form_fields(form, form_opts=form_opts) }}
+  </div>
+  <div class="modal-footer">
+        {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }}
+  </div>
+  {% endcall %}
+
     {# "save and add" button is removed from modal (it won't function properly) #}
-    {% block create_form %}
+    {# % block create_form %}
       {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
                          action=url_for('.create_view', url=return_url),
                          is_modal=True) }}
-    {% endblock %}
-  </div>
+    {% endblock % #}
+
+
 {% endblock %}
 
 {% block tail %}
-  <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+  <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
 {% endblock %}

flask_admin/templates/bootstrap4/admin/model/modals/edit.html

@@ -6,19 +6,24 @@
 
 {% block body %}
   <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     {% block header_text %}
-      <h3>{{ _gettext('Edit Record') + ' #' + request.args.get('id') }}</h3>
+    <h5 class="modal-title">{{ _gettext('Edit Record') + ' #' + request.args.get('id') }}</h5>
     {% endblock %}
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+
   </div>
+
+  {% call lib.form_tag(action=url_for('.edit_view', id=request.args.get('id'), url=return_url)) %}
   <div class="modal-body">
-    {# "save and continue" button is removed from modal (it won't function properly) #}
-    {% block edit_form %}
-      {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
-                         action=url_for('.edit_view', id=request.args.get('id'), url=return_url),
-                         is_modal=True) }}
-    {% endblock %}
+        {{ lib.render_form_fields(form, form_opts=form_opts) }}
   </div>
+  <div class="modal-footer">
+        {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }}
+  </div>
+  {% endcall %}
+
 {% endblock %}
 
 {% block tail %}