Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#7371 closed defect (fixed)

Slider: Labels cutoff in when slider control is disabled (IE)

Reported by: crink Owned by: Douglas Hays
Priority: high Milestone: 1.4
Component: Dijit - LnF Version: 1.1.1
Keywords: slider label Cc:
Blocked By: Blocking:

Description (last modified by bill)

Labels are being cutoff in IE when a slider with horizontal labels is used. If the slider in enabled the labels display fine. If the slider is disabled. Then the label at the beginning and end are cutoff.

comparison image for ie6 and firefox 3

It looks like this is occurring in the <div class="dijitRuleContainer dijitRuleContainerH" > area or in table cell above this.

The issue is related to the alpha transparency rule that is used for:

.dj_ie6 .tundra .dijitSliderDisabled,
.dj_ie6 .tundra .dijitSliderDisabled .dijitRuleContainer,
.dj_ie6 .tundra .dijitSliderDisabled .dijitSliderRemainingBar,
.dj_ie6 .tundra .dijitSliderDisabled .dijitSliderProgressBar {
	filter: gray() alpha(opacity=60); 
}

Removing the filter is a workaround to the issue. The attached image was taken from the following dojo hosted URL. http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Slider.html

Attachments (4)

sliderbugIE6.png (40.0 KB) - added by crink 11 years ago.
comparison image for ie6 and firefox 3
bleed.png (14.1 KB) - added by bill 11 years ago.
show problem on all browsers w/transparency
ie8.png (6.4 KB) - added by bill 10 years ago.
screen shot of IE8 themeTester.html
ff.png (8.6 KB) - added by bill 10 years ago.
screen shot of FF themeTester.html

Download all attachments as: .zip

Change History (12)

Changed 11 years ago by crink

Attachment: sliderbugIE6.png added

comparison image for ie6 and firefox 3

comment:1 Changed 11 years ago by Adam Peller

Owner: changed from anonymous to Douglas Hays

comment:2 Changed 11 years ago by bill

Component: GeneralDijit
Summary: Labels cutoff in IE6 when slider control is disabled.Slider: Labels cutoff in IE6 when slider control is disabled.

Changed 11 years ago by bill

Attachment: bleed.png added

show problem on all browsers w/transparency

comment:3 Changed 11 years ago by bill

Component: DijitDijit - LnF
Description: modified (diff)

We shouldn't be using transparency (on any browser) to indicate disabled-ness, because it makes the background of the page bleed through the disabled slider:

show problem on all browsers w/transparency

Instead use different background-image files and different text/background colors.

comment:4 Changed 11 years ago by bill

Milestone: tbd1.3

comment:5 Changed 11 years ago by Douglas Hays

Milestone: 1.31.4

Deferred until after IE8 support is added.

comment:6 Changed 10 years ago by bill

Description: modified (diff)
Summary: Slider: Labels cutoff in IE6 when slider control is disabled.Slider: Labels cutoff in when slider control is disabled (IE)

Just updating title to indicate that labels are being cut off in IE8 too (and IE7 also I think). It's not just a horizontal cutoff as the labels from the second disabled horizontal slider in themeTester.html are being cut off vertically:

screen shot of IE8 themeTester.html

Correct look:

screen shot of FF themeTester.html

Changed 10 years ago by bill

Attachment: ie8.png added

screen shot of IE8 themeTester.html

Changed 10 years ago by bill

Attachment: ff.png added

screen shot of FF themeTester.html

comment:7 Changed 10 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

(In [17341]) Fixes #7371. Removed slider css that set opacity for disabled state. Added background and foreground color color styles to show disabled. Added background position x,y to point to non-active arrow sprites. Additional theme icons may need to be created for disabled slider handles.

comment:8 Changed 10 years ago by Douglas Hays

(In [20858]) Refs #7371. Re-add ally-specific Slider CSS rules for opacity since the new disabled images/colors are not different in high-contrast mode.

Note: See TracTickets for help on using tickets.