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:
After the OpenDialog button is clicked, the UI looks like this:
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
Solved! Go to Solution.
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.
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.
I think Kelly is right, z-index is the only thing that I can think of that would be causing this issue.
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