androidjquerycssjquery-mobilepanel

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.

enter image description here

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.

<div data-role="panel" id="sidebar-menu-monthly" data-position="left" data-display="overlay" data-dismissible="true" data-theme="a" >
    <ul>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
    </ul>
</div>

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 Panel is not taking more width than it actually looks. So it is not the problem.

Solution

  • I found the issue.

    This css (from default jqm css - jquery.mobile-1.3.2.min.css) was creating issue

    .ui-panel-dismiss-open
{
  left: 17em;
}

    So it was being dismissed in right most areas only. I had to override the css in my css file to:

    .ui-panel-dismiss-open
{
   left: 13em !important;
}

    And now its working fine.