JSAPI TimeSlider displays on top of a modal dijit.Dialog (bug?)

3373
3
Jump to solution
06-09-2015 01:09 PM
DirkVandervoort
Occasional Contributor II

My JSAPI web app has a timeslider on it. There is also a dijit.forms.button that is used to open a dijit.dialog, which will have content.

When the dijit.dialog is shown, the time slider stays visually on top of the dijit, dialog. I've testing it in a couple of scenarios and this is repeatable. I've done with both declarative and programmatic instances of the time slider and dijit.dialog.

The screen caps below show what's going on.

Before the OpenDialog button is clicked, the UI looks like this:

ONE.png

After the OpenDialog button is clicked, the UI looks like this:

TWO.png

Note how the play button, slider and thumbs, and FF/RW buttons are staying on top of the "Outage Schedule" dijit.dialog. Also, the mouse events still occur on the time slider, instead of being "greyed out" like the rest of the application.

Seriously, what's up with that? Is this a defect in the JSAPI TimeSlider widget? Is that a way to put the time slider "under" the modal dialog?

Any help please. TIA

Dirk

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

Could be an issue with the z-index of the  slider. Try inspecting the css for the time-slider and see if it has a z-index set that is higher than that of the dialog.

If that doesn't help. Is your app public? If so can you share the url so we can see the issue in action.

View solution in original post

3 Replies
KellyHutchins
Esri Frequent Contributor

Could be an issue with the z-index of the  slider. Try inspecting the css for the time-slider and see if it has a z-index set that is higher than that of the dialog.

If that doesn't help. Is your app public? If so can you share the url so we can see the issue in action.

OwenEarley
Occasional Contributor III

I think Kelly is right, z-index is the only thing that I can think of that would be causing this issue.

0 Kudos
DirkVandervoort
Occasional Contributor II

Yep --> z-index.

In fact, all I needed to do was set a z-index for the timeSlider in css and the problem disappeared. Didn't even matter what the z-index was.

Thanks Kelly and Owen