Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#17031 closed defect (fixed)

Menu: highlighting of disabled MenuItems uneven

Reported by: bill Owned by: bill
Priority: undecided Milestone: 1.10
Component: Dijit Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

Load test_Menu.html on IE9 or IE10 and in console type:

dijit.byId("cut").set("disabled", true);

Then open the Edit menu and hover on "Cut". The shading for the icon is different than the shading for the text. Works well on IE8 and Chrome/mac.

Attachments (2)

menu.gif (17.1 KB) - added by bill 6 years ago.
screenshot
dijitMenuItem.png (24.7 KB) - added by fbest 6 years ago.
screenshot of broken disabled menu item in all kind of browsers

Download all attachments as: .zip

Change History (11)

Changed 6 years ago by bill

Attachment: menu.gif added

screenshot

Changed 6 years ago by fbest

Attachment: dijitMenuItem.png added

screenshot of broken disabled menu item in all kind of browsers

comment:1 Changed 6 years ago by fbest

Its not only a problem with IE. All kind of browsers are affected in a different way. See screenshot.

This has to do with the style rule for .dijitMenuItemDisabled * { opacity: 1; }

comment:2 Changed 6 years ago by fbest

Can you please change the title !?

comment:3 Changed 6 years ago by fbest

The fix for FF and Chromium is to remove the following rule:

claro.css +3456

.claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
    opacity: 1;
}
Last edited 6 years ago by bill (previous) (diff)

comment:4 Changed 6 years ago by bill

Summary: Menu: highlighting of disabled MenuItems uneven on IE9+Menu: highlighting of disabled MenuItems uneven

OK thanks. I'm wondering why that CSS is there to begin with. It started in bd2cdf95c1de3f7796dee5fcb3677df06c3f61e1, along with the rename from lucid --> claro, but sadly without any documentation.

comment:5 Changed 6 years ago by fbest

Fix:

.claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
        /* removes the rule from Menu.less */
	opacity: inherit;
}
.claro .dijitMenuItemDisabled {
	opacity: 0.5;
}

.dj_ie8 .claro .dijitMenuItem {
	// IE8 does not support transparency
	background-image: none;
}

.dj_ie8 .claro .dijitMenu .dijitMenuItemHover td,
.dj_ie8 .claro .dijitMenu .dijitMenuItemSelected td,
.dj_ie8 .claro .dijitMenu .dijitMenuItemFocused td,
.claro .dijitMenu .dijitMenuItemDisabled.dijitMenuItemSelected td,
.claro .dijitMenu .dijitMenuItemDisabled.dijitMenuItemHover td,
.claro .dijitMenu .dijitMenuItemDisabled.dijitMenuItemFocused td {
	border-top-color: transparent!important;
	border-bottom-color: transparent!important;
}

Last edited 6 years ago by fbest (previous) (diff)

comment:6 Changed 6 years ago by bill

Milestone: tbd1.10
Status: newassigned

comment:7 Changed 6 years ago by Bill Keese <bill@…>

Resolution: fixed
Status: assignedclosed

In f06ba48d555f07799648718bfd96f3a80bec9fa3/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:8 Changed 6 years ago by fbest

Hmm, could a disabled menu item be added to the theme tester?

Also the commit doesn't fix every style problem especially not for themes based on claro which uses other colors and other background images/gradients.

comment:9 Changed 6 years ago by bill

If there are other themes with this problem, you'll need to contact the owners of those themes to have them updated.

As for themeTester.html, there is actually already a disabled MenuItem?, on the right-click context menu.

Note: See TracTickets for help on using tickets.