robesridude2

overriding zoom slider CSS styles causes error in behavior

Discussion created by robesridude2 on Jul 6, 2011
Latest reply on Jul 6, 2011 by saurabh_gupta-esristaff
By default the zoom slider places tic marks to the right of the zoom slider, to the side of the main rail with the grip handle. I'm trying to move these tics and center them on the bar instead of being on the right. I'm able to do this by adjusting the 'left' property in dijitRuleContainerV CSS style.

However,once shifted, the tic marks interfere with the behavior of the slider handle. When the mouse is over the tics, the handle is disabled and the user cannot grab the handle. I've made sure the z-index of the handle is higher than the tic marks, but this does not help.
Any ideas on how to move the tics onto the slider bar and have the handle behave the same as it should?

Sample CSS below, can use these to overwrite default styles (using vertical slider). This will shift the tics, but when you mouse over right-half of the handle, the part over the tics, the handle will not activate.
Screen shot attached, notice the cursor is still a pointer when over the slider handle and cannot move the handle when over tics.

Thanks for any tips, Rob.


/* set z-index of handle higher than tics */
.dijitSliderImageHandleV {

z-index: 2000 !important;

}


/* shift tics to left so over zoom slider rail */
.dijitRuleContainerV
{
left: -10px !important;
z-index: 1000 !important;
}

Attachments

Outcomes