jQuery Mobile Panel not closed when clicked nearer the panel [android help]

jQuery Mobile Panel not closed when clicked nearer the panel

I am having a little problem with a panel in my jQuery Mobile application. Everything works fine except the functionality of Dismiss Panel on clicking outside.

See the screenshot below which explains my issue.

Notice the red line I have made. If I click on right side of that line when my panel is open, it works fine. But if I click on left of that line then panel is not being closed.

Here is the html part.

I tried setting data-display="push", too. That didn't work either.

This is the stylesheet part:

/* wrap on wide viewports once open */
@media (min-width:55em){
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
        margin-right: 17em;
    }
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
        margin-left: 17em;
    }
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
        width: auto;    
    }
    .ui-responsive-panel .ui-panel-dismiss-display-push {
        display: none;
    }
}

I already tried this answer, but it didn't help me. I also checked this fiddle. But it doesn't give me any idea about what changes I need to make in stylesheet.

I also tried changing @media (min-width:55em) to @media (min-width:35em), which didn't help either.

It would be great if someone could help with stylesheet part.

P.S: I have already checked in browser that the div of oanel is not taking more width than it actually looks. So it is not the problem.

Read more

stackoverflow.comm