jquery datepicker and odd select list behavior

November 20, 2012, 03:56 PM

I have recently started implementing jquery's datepicker and an add on timepicker. I'm using this instead of the core calendar to achieve consistent visual flow between the date and time and because I'm placing the entry elements programmatically so my launch page is totally dynamic and database driven.

I've run into a quirk though... when the datepicker calendar pops up it correctly overlays input fields, but does not overlay select lists. I see them in addition to the calendar. I have no idea why or what to do about it I'm sure IBI will say it's jquery's problem and jquery will say it's IBI's, so I'm stuck.

I tried recreating the issue in netbeans, but it seems to work correctly there, but that's sort of an apples to nerf balls comparison because I wrote a very simple ten line html form and ran it through netbeans and glassfish.

Anyone have any ideas where to look?

I don't mind posting pics or code, but it's pretty long code -- lots of HTML, quite a bit of javascript.

November 20, 2012, 04:05 PM

Waz

Which browser is it you are using ?

I have seen IE (Older versions, not sure about newer ones) always put the list boxes on top.

The solution I had at the time was to turn there visibility to invisible, or was it diaplay to none, can't remember.

November 20, 2012, 04:09 PM

ChrisJ

Currently IE 8, our "corporate standard". I don't recall if I recreated the behavior in chrome or not. I think I tried both IE and Chrome at home on the netbeans experiment, but I don't know that it proves anything.

November 20, 2012, 05:10 PM

Francis Mariani

How about your doctype? Just a suggestion...

I've started sticking this at the top of all my HTML pages, HTML Composer generated or not - HTML5:

<!DOCTYPE HTML>

If it's an HTML Composer generated page, then this is also in the file, but ignored, because of the first doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

One problem with this is that every time you edit the file via the GUI, this is added as the first line of code and must be removed to ensure the HTML5 doctype is used:

<!-- Generated by Report Layout Painter -->

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

November 21, 2012, 04:45 AM

Wep5622

The default z-index for the datepicker (recent versions of JQuery) is 2.

Many launch page controls are created with z-indexes on all kinds of levels, causing them to overlap. This may be your problem.

To fix this, create a style for the datepicker control forcing the z-index to a sufficiently high value, for example:

/* Override default datepicker z-index */
#ui-datepicker-div {
	z-index: 10 !important;
}

It's either that or IE's obnoxious refusal to adhere to standards.

November 26, 2012, 01:07 PM

ChrisJ

I noticed that all of my input parms consistently have a z-index of 61, where my select parms are all over the place. I made the z-index for my selects all 61 and it seems to have cured the problem. Not a particularly elegant solution, but effective. I'll look into doing it via css so I do't have to remember in the future, it will just be automagic.

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!