Modal box does not show up on Mobile browsers when editor box is opened

kaustubh.agrawal2000

Hello,

I have a case where there is a button on editor box and on clicking the button a modal box is opened...

Everything is working fine for PC & Tabs but for mobile browsers the modal box is not showing up..

Steps to reproduce...

Go to gadhiya.in
Login
   - UNAME: kaustubh.agrawal2012@gmail.com
   - PWD : 12345678
goto: https://gadhiya.in/dispatch
Click NEW
Click "Select Sauda" button
No popup is seen..

Any help would be deeply appriciated..

Regards
Kaustubh

kaustubh.agrawal2000

Seems like for mobile browsers the editor dialog adds a class called
"DTED_Lightbox_Mobile" to body tag and when a modal box is opened it also adds a "modal-open" class to the body tag...

and although the background becomes dark the box itself cannot be seen..

if I remove the editor class "DTED_Lightbox_Mobile" from body tag.. everything works as intended..

Any help on this would be greatly appriciated..

Regards
Kaustubh

allan

What browser and version are you using?

Allan

kaustubh.agrawal2000

I have tried it on Android chrome & Iphone safari...

allan

I'm thinking its probably a position:fixed bug, but I've not been able to reproduce it locally yet I'm afraid.

Allan

kaustubh.agrawal2000

I see...
BTW, what purpose does this class "DTED_Lightbox_Mobile" serve.. and is it okay if I remove this class dynamically from JS ...?? I mean will it break anything ?

Regards
Kaustubh

allan

It adds a fair amount of CSS to try and make the layout better for mobile browsers, since they generally don't work well with position:fixed:

body.DTED_Lightbox_Mobile {
    div.DTED_Lightbox_Background {
        height: 0;
    }

    div.DTED_Lightbox_Shown {
        display: none;
    }

    div.DTED_Lightbox_Wrapper {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: auto;
        height: auto;
        margin-left: 0;
        -webkit-overflow-scrolling: touch;

        div.DTED_Lightbox_Container {
            display: block;

            div.DTED_Lightbox_Content_Wrapper {
                display: block;

                div.DTED_Lightbox_Content {
                    border: 4px solid rgba(220, 220, 220, 0.5);
                    border-radius: 0;

                    div.DTE {
                        border-radius: 0;
                        box-shadow: 0 0 5px #555;
                        border: 2px solid #444;

                        div.DTE_Header {
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                        }

                        div.DTE_Footer {
                            border-bottom-left-radius: 0;
                            border-bottom-right-radius: 0;
                        }
                    }

                    div.DTED_Lightbox_Close {
                        top: 11px;
                        right: 15px;
                    }
                }
            }
        }
    }
}

I suspect it will be the div.DTED_Lightbox_Shown part that is causing problems for you since you are attempting to show another modal at the same time as Editor's, which it wasn't really designed for.

Allan