DateBox not showing (jQM1.4.2+) (zIndex Issue)

[gregh3269]

I have just upgraded to jqm 1.4.2 and on some of my screens the date box won't show correctly. If you debug it, it seems to be opening off the bottom of the page, hidden,

element.style { left: 609.5px; position: absolute; top: 1085.2px; z-index: 500; }

I have a class of ui-content on my main div for alignment of the headings/footers:

div role="main" class="ui-content" .... div

removing "ui-content" fixes the opening (mucks ups my headings!). It seems something to do with the heading/footer alignment, as I have tried it on its own and it works OK.

It works fine with 1.4.1, Any ideas?

Cheers Greg

[jnyrup]

Hi Greg

Could you provide an example of a non-working page? e.g. jsbin.com

[gregh3269]

Thanks for the quick reply, going through and removing the code is seems not the header stuff but the swipe left div that I have on the the top of the page.

Replacing :

div data-role="panel" id="leftpanel" data-display="reveal" data-position="left"

with just a div makes it work. Also, the pages that it works on do not have the swipe left.

I will see if I can create an example, but have not used jsbin..... is this enough info?

Cheers Greg.

[gregh3269]

is this ok http://jsfiddle.net/D2XEn/3/

It does not open. diff versions.......

[gregh3269]

Seems to an another div ui-panel-wrapper in the 1.4.2 with the div role="main" class="ui-content"

div class="ui-panel-wrapper" .. div div class="ui-datebox-container...

arg.... its the z-index: 999; on the ui-panel-wrapper

[gregh3269]

workaround : with swipe and div class="ui-content" as above .ui-panel-wrapper { z-index: 499; }

element.style >> z-index: 500;

[jnyrup]

The change in behavior is due to the addition of line 57-59 in https://github.com/jquery/jquery-mobile/commit/b003c20f732905725d8354b81ad2b622498b232e

Setting zindex to 999 or higher in jqm-datebox also seems to fix the problem, but I haven't tested if that breaks anything else.

[jtsage]

zIndex changes should not adversly affect datebox, assuming you are using the 'zindex' option. (or popup mode probably... then you could do it in css instead likely)

[slavap]

@jtsage - I don't understand your comment. The problem is not fixed, and datebox is not working with jqm 1.4.2 and 1.4.3 out of the box. Are you saying that we have to set zindex manually? Changing zindex from 500 to 999 in jqm-datebox.js resolves this bug, and after that everything is working just fine out of the box, so please fix it.

[gregh3269]

I use jqm 1.4.2 and use this css fix to make everything work:

/* Get disabled buttons to grey out working */ .ui-datebox-griddate-disable { color: #888888 !important; cursor: default !important; background: none repeat scroll 0 0 #F6F6F6 !important; }

/* with swipe and div class="ui-content" as datebox uses 500 */ .ui-panel-wrapper { z-index: 499; }

If you use a swipe left the date box won't popup without the z-index change to 499.

Cheers Greg

[slavap]

That's exactly my point - datebox must work with jQuery Mobile without any additional tuning right out of the box. So fix must be included into datebox distribution, not "esoteric" knowledge from issue discussion :-)

[jtsage]

fwiw, you can alter datebox's zindex with an option as well - the issue I have, is what is the "right" value? I could certainly bump it up to make sure that it is above ui-panel, but am I going to adversely affect some other option set somewhere down the line?

So, looking through the jqm css, it looks like probably 1100 is a good value - over everthing there, but still under the loader. Dunno, going to reopen this, and tag it in a commit to bump zindex. Hopefully any breaking changes will be noted here. Thanks.

[slavap]

Thanks! I will test with 1100 and let you know, it's really ugly design in jQuery Mobile, that you have to pick up some magic numbers :-(

[gregh3269]

Tested Version 2014-Jul-22 12:45:40 and works great.

Cheers Greg.

[slavap]

For me zindex 1100 works perfectly as well.