3

I have a jQuery Mobile site with some date inputs, I am using the Mobiscroll datepicker (in modal mode) for these. It works well on standard jQM pages, but it has a problem when I have a date input that is on a jQM modal.

The problem is the datepicker modal shows under the jQM modal and so the user can't see it, I want the datepicker to show over the top of the jQM modal. If I hide the jQM modal using Firebug, I can also see that the datepicker is under the jQM "dark" filter - where it makes everything dark except the jQM modal.

The code I'm using to setup the Mobiscroll datepicker is:

$('#mydate').scroller('destroy').scroller($.extend(
{
    preset : 'date',
    dateFormat: 'dd/mm/yyyy'
},
{
    display: 'modal',
    mode: 'scroller',
    theme: 'default',
    lang: 'en'
}));

I have tried modifying the elements in Firebug to see if some CSS would fix it, I tried setting the datepicker to a high z-index and the jQM modal to a lower z-index, also tried forcing it with !important but this didn't change anything. The other Mobiscroll display options: top, bottom, bubble have the same problem.

How can I get the datepicker to display on top of the jQM modal?

jQM version: 1.2.0 (latest), with jQuery 1.8.2
Mobiscroll version: 2.4.4 (latest)

RandomCoder
  • 1,358
  • 5
  • 20
  • 35
  • I got the source code of the demo page on iPhone 4. I hope this could help you out. I will go through the code once I go home. http://pastebin.com/skWAE9ff – Omar Feb 22 '13 at 18:59

2 Answers2

0

Try this:

.dw-persp, .dwo {z-index:1051;}
.dw {z-index:1051;}

You'd better put it in the last css

huanglei
  • 1
0

I happened to have the same issue and here it my fix: Check the css of the modal(the default z-index for jquery mobile modal is 1050). Then go to mobicroller css and change the z-index to any value above it. As long as mobiscroller has a hinger z-index it should show on top modal without any problem.

Gin
  • 33
  • 5