Alert / popup window not cleared on clicking X

Frappe Framework
1

Screenshot_20231128-121307
Screenshot_20231128-1213071080Ă—2460 164 KB

A web form created on Frappe 14. Unable to clear this alert by tapping on top right X. Same is the case on desktop, but working with Escape key, and not with the mouse click.

If I click outside this popup / alert window, then it goes away. But there is hardly any outside space on mobile.

Tapping and clicking on cross should work.

Where am I wrong?

What can I do?

2

I found that issue is with this particular instance (of Frappe / website / Server). At other server / installation, it is wprking fine.

Where can I look-into to resolve the issue?

3

Try to console

4

How? Please give some hint / pointer.

I was aksed on Telegram group about the version of bootstrap, so as pee that, issue might be with bootstrap.

I found two files:

One at: frappe-bench/apps/frappe/frappe/public/css/bootstrap.css with version:
Bootstrap v3.3.1

and 2nd at: frappe-bench/apps/frappe/node_modules/bootstrap/dist/css/bootstrap.css with version: Bootstrap v4.5.0

Is there anyother way to check it?

I found these versions are same on the erver where things are working fine.

5

This happens when website on which form is loaded is with bootstrap v 5.0.0 as currently frappe is still on version 4.5
you can run following in browser console to verify bootstrap version
$.fn.tooltip.Constructor.VERSION

so there are 2 solutions for you

  1. downgrade the main website to bootstrap 4.5 : might not be possible to change as whole website might break down.

  2. override the form code to dismiss even with bootstrap 5.0.0 by changing property data-dismiss=“modal” to data-bs-dismiss=“modal”. alternatively you can put below code in client script or in a seperate file and import it globally using hooks.py.

 frappe.get_modal = function (title, content) {
        return $(
            `<div class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">${title}</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            ${frappe.utils.icon("close-alt", "sm", "close-alt")}
                            </button>
                        </div>
                        <div class="modal-body">
                            ${content}
                        </div>
                        <div class="modal-footer hidden">
                            <button type="button" class="btn btn-default btn-sm btn-modal-close" data-bs-dismiss="modal">
                                <i class="octicon octicon-x visible-xs" style="padding: 1px 0px;"></i>
                                <span class="hidden-xs">${__("Close")}</span>
                            </button>
                            <button type="button" class="btn btn-sm btn-primary hidden"></button>
                        </div>
                    </div>
                </div>
            </div>`
        );
    };
1 Like