topic Re: overriding zoom slider CSS styles causes error in behavior in ArcGIS JavaScript Maps SDK Questions

overriding zoom slider CSS styles causes error in behavior

RobWaller — Wed, 06 Jul 2011 15:04:07 GMT

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;
}

Re: overriding zoom slider CSS styles causes error in behavior

SaurabhGupta — Wed, 06 Jul 2011 17:23:57 GMT

Hi Rob,

Can you try these classes :

.dijitRuleContainer {
left : -15px;
z-index: 0;
}
.dijitSliderDecorationC {
opacity : 0.9;
z-index: 10;
}

Hope this helps.

Re: overriding zoom slider CSS styles causes error in behavior

RobWaller — Wed, 06 Jul 2011 17:53:28 GMT

Thanks,
Are these to be used in place of the ones in sample I provided or in addition to those styles?
Either way I try it doesn't solve issue.
If I use only classes in your sample:
Setting 'left' to -15 places the tics to the left of the bar. If I change to -10 they are centered on bar but they are under the bar. If I increase z-index from 0 to 1 they are above the bar, but then I have same issue as before, can't grab the handle when mouse is over the tics.

If able to provide more info on these classes or a full sample would be great,
Thanks

Re: overriding zoom slider CSS styles causes error in behavior

SaurabhGupta — Wed, 06 Jul 2011 18:09:27 GMT

Hey Rob,
I just modified an online sample in order to incorporate your requirement. I am sure there are other ways too.

Can you please share your css file and I will try to incorporate that in my application.

Thanks.