Opened 12 years ago

Closed 12 years ago

#2969 closed defect (wontfix)

Menu: obscured by Firefox's scrollbar on Macs

Reported by: guest Owned by: bill
Priority: high Milestone: 1.0
Component: Dijit Version: 0.4.2
Keywords: Cc:
Blocked By: Blocking:

Description

If I open a !PopupMenu2 and it happens to overlap an element with a scrollbar, the scrollbar incorrectly gets rendered on top of the !PopupMenu2. This happens in Firefox running on Macs only.

Workaround is to include this CSS:

.dojoPopupMenu2 > tbody {overflow: auto}

Change History (5)

comment:1 Changed 12 years ago by guest

The fix I proposed above seems to cause problems with Firefox's "outline" CSS if the last MenuItem? in the PopupMenu? is focused. The "outline" CSS seems to increase the size of the MenuItem? by a little which causes the overflow to exhibit a scrollbar temporarily. My workaround for that in my app is just to hide the "outline" with "{outline:0}" but I suppose that will have a11y concerns inside Dojo. Just a heads up.

comment:2 Changed 12 years ago by bill

Component: GeneralDijit
Milestone: 1.0
Owner: changed from anonymous to bill
Summary: PopupMenu2 obscured by Firefox's scrollbar on MacsMenu: obscured by Firefox's scrollbar on Macs

Hmm, interesting workaround. How about if you always show an outline (whether focused or not) but when not focused the outline is transparent?

Actually I don't understand how this could happen. I thought that outlines didn't take up any space: http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines.

comment:3 in reply to:  2 Changed 12 years ago by guest

Replying to bill:

Actually I don't understand how this could happen. I thought that outlines didn't take up any space: http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines.

That's what I thought too. But I was pushed to get something out the door so I didn't have time to investigate further. But losing the outline did stop the overflow.

comment:4 Changed 12 years ago by bill

Hmm, I tried adding

.dj_gecko .dijitMenu > tbody {overflow: auto; }
.dj_gecko .dijitMenuItemLabel { outline: 0; }

but in addition to the a11y question about not displaying the dotted border (which I think is OK since the selected node is highlighted and the colors are inverted), the border of the table itself gets cutoff on the bottom and right.

And if I make the border big then scrollbars show up (even though I've set overflow:visible). Very strange.

comment:5 Changed 12 years ago by bill

Resolution: wontfix
Status: newclosed

OK, this works in FF3, so I don't want to spend time working around it in FF2.

Note: See TracTickets for help on using tickets.