Opened 8 years ago
Closed 5 years ago
#16929 closed task (patchwelcome)
Menu: implement with <div> rather than <table>
Reported by: | bill | Owned by: | bill |
---|---|---|---|
Priority: | undecided | Milestone: | 1.13 |
Component: | Dijit | Version: | 1.8.3 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
Change Menu and MenuItem (plus subclasses) from <table> (and <tr> and <td>) to <div>'s. This will allow RadioMenuItem's to be put into groups as recommended in http://www.w3.org/TR/wai-aria/roles#menuitemradio, ex:
<div data-dojo-type=Menu> <div role=group> <div data-dojo-type=RadioMenuItem>Red</div> <div data-dojo-type=RadioMenuItem>Green</div> <div data-dojo-type=RadioMenuItem>Blue</div> </div> <div data-dojo-type=MenuSeparator></div> <div role=group> <div data-dojo-type=RadioMenuItem>Small</div> <div data-dojo-type=RadioMenuItem>Medium</div> <div data-dojo-type=RadioMenuItem>Large</div> </div> </div>
It also allows the theme more customization of the menu's style.
Using <div>'s is admittedly harder than using <table>'s: the icon and right arrow can be positioned using float:left and float:right, or via judicious use of margins and position:absolute, etc. The accelerator key is harder since the width will vary based on the font, but I think it can be done, assuming full-zoom rather than text-only zoom.
See also similar ticket for Toolbar, #16266.
Change History (10)
comment:1 Changed 8 years ago by
Milestone: | tbd → 2.0 |
---|---|
Status: | new → assigned |
comment:2 Changed 7 years ago by
comment:3 Changed 7 years ago by
Not sure what you are getting at, you want multiple MenuItems? on a single row?
On another note, I realized now one can also form groups by using multiple <tbody> nodes.
comment:4 Changed 7 years ago by
comment:5 follow-up: 6 Changed 7 years ago by
Sure, that's what this ticket is about, but the hard part is doing alignment (like the current table).
comment:6 Changed 7 years ago by
Replying to bill:
Sure, that's what this ticket is about, but the hard part is doing alignment (like the current table).
You suggested using block-level DIVs with floats. And I wanted to know whether you have considered inline DIVS(rather than block-level DIVs).
comment:7 Changed 7 years ago by
OK I see, well I considered it a bit, but I'm skeptical we could make the alignment work. Somehow all the menu labels would need to be the same width. A lot of web developers would simply say something like width: 200px
for the inline-div with the label, but the problem that cuts off the text if/when (1) the user has set a large font size via a custom user stylesheet or (2) the app is translated to a wordy language like German and the strings get long.
Perhaps you are thinking of some approach that I didn't consider.
comment:9 Changed 7 years ago by
Right... even getting the accelerators the same width is problematic, especially if only some menu items have accelerators, and/or if some menu items have long accelerators lift shift-ctrl-x.
comment:10 Changed 5 years ago by
Milestone: | 2.0 → 1.12 |
---|---|
Resolution: | → patchwelcome |
Status: | assigned → closed |
Given that no one has shown interest in creating a patch in the past 2+ years, I'm closing this as patchwelcome.
How about using inline DIVs for MenuItems??