889622 - Calendar pop-up is underneath the map

Status: RESOLVED DUPLICATE of bug 856994

(Mozilla Reps Graveyard :: reps.mozilla.org, task)

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

When the calendar pop up on /events is close to the bottom of the screen, it appears _above_ the form field rather than _below_. And when it does that, it is z-indexed lower than the map itself. 

Screenshot:

http://awesomescreenshot.com/0981go5v78

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: Calendar pop-up is below the map

Comment 2

[Craig Cook (:craigcook)]

The datepicker div is getting an inline style of z-index: 1, which seems to be coming from this line in jquery-ui:
https://github.com/mozilla/remo/blob/master/media/js/libs/jquery-ui-1.10.0.custom.js#L1053

If I read that right, it gets the z-index value of the associated form field and adds 1. The field in this case has no explicit z-index (just the default z-index:auto), hence, the script inserts an explicit z-index: 1 because it treats auto as 0.

Then in app.less, this line:
https://github.com/mozilla/remo/blob/master/media/css/remo/app.less#L1399

Reads:
.ui-datepicker {
    z-index: 200px;
}

where 200px isn't a valid value for z-index so it's being ignored. I'm sure that's just a typo and was meant to be z-index: 200, but even then I'm not sure it would take effect since the inline z-index: 1; might still override it in the cascade order (I haven't actually tried).

Possible fixes:

1. Fix the z-index: 200px; in app.less and see if that overrides the inline style.
2. If that doesn't work, give the date field a z-index that the script will read and +1 so we get a higher inline value on the div.