Select to view content in your preferred language

overriding zoom slider CSS styles causes error in behavior

1055
3
07-06-2011 08:04 AM
RobWaller
Occasional Contributor
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;
}
0 Kudos
3 Replies
SaurabhGupta
Emerging Contributor
Hi Rob,

Can you try these classes :

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

Hope this helps.
0 Kudos
RobWaller
Occasional Contributor
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
0 Kudos
SaurabhGupta
Emerging Contributor
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.
0 Kudos