From a49a419ed21071d32836212f06f79ccedabc78ae Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 15 Dec 2009 08:57:08 +0000 Subject: [PATCH] Fixes #3850: Submenu icon is placed outside the menu in IE7 * Refactored VMenuBar to not use TABLE element. Now uses DIVs all the way. * Note, the theme for MenuBar sub-menus seems to be quite fragile in IE6 and IE7. IE6 doesn't allow any of the contained elements to get "hasLayout", otherwise the popup will be too wide. IE7 needs some DeferredCommand magic to make it render separator items correctly. svn changeset:10301/svn branch:6.2 --- .../VAADIN/themes/base/menubar/menubar.css | 67 +++++------- WebContent/VAADIN/themes/base/styles.css | 67 +++++------- .../themes/reindeer/menubar/menubar.css | 23 ++-- WebContent/VAADIN/themes/reindeer/styles.css | 90 ++++++---------- .../VAADIN/themes/runo/menubar/menubar.css | 25 ++--- WebContent/VAADIN/themes/runo/styles.css | 92 +++++++--------- .../terminal/gwt/client/ui/VMenuBar.java | 102 +++++++++--------- 7 files changed, 194 insertions(+), 272 deletions(-) diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.css b/WebContent/VAADIN/themes/base/menubar/menubar.css index 0b0201b231..93ff5466b6 100644 --- a/WebContent/VAADIN/themes/base/menubar/menubar.css +++ b/WebContent/VAADIN/themes/base/menubar/menubar.css @@ -1,43 +1,35 @@ -.v-ie6 .v-menubar { - float: left; /* Force minimum width in IE6 */ -} -.v-menubar table { - border-collapse: collapse; - padding: 0; - margin: 0; +.v-menubar { + float: left; /* Force minimum width */ + overflow: hidden; } .v-menubar .v-menubar-menuitem { cursor: default; vertical-align: middle; white-space: nowrap; + float: left; } -.v-menubar .v-menubar-menuitem * { +.v-menubar .v-menubar-menuitem-caption * { vertical-align: middle; + white-space: nowrap; } .v-menubar-submenu { background: #fff; } -.v-menubar-submenu table { - border-collapse: collapse; - padding: 0; - margin: 0; -} -.v-menubar-submenu table td { - white-space: nowrap; - padding: 0; - margin: 0; -} -.v-menubar-menuitem-selected{ +.v-menubar-menuitem-selected { background: #333; color: #fff; } .v-menubar-submenu .v-menubar-menuitem { cursor: default; - vertical-align: middle; - white-space: nowrap; + position: relative; + padding-right: 1.5em; } -.v-menubar-submenu .v-menubar-menuitem * { - vertical-align: middle; +.v-menubar-submenu .v-menubar-menuitem-caption { + display: block; +} +.v-menubar-submenu .v-menubar-menuitem *, +.v-menubar-submenu .v-menubar-menuitem-caption * { + white-space: nowrap; } .v-menubar-submenu-indicator { display: none; @@ -45,23 +37,12 @@ font-family: arial, helvetica, sans-serif; } .v-menubar-submenu .v-menubar-submenu-indicator { - display: inline; - display: inline-block; - zoom: 1; - margin-left: 1em; - float: right; - height: 100%; - font-size: 0.9em; -} -.v-ie6 .v-menubar-submenu .v-menubar-submenu-indicator { + display: block; position: absolute; right: 0; - margin-right: 0; - margin-top: -2px; -} -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - position: relative; - margin-left: 0; + width: 1em; + height: 1em; + font-size: 0.9em; } .v-menubar-menuitem-disabled { color: #999; @@ -70,13 +51,17 @@ /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } +.v-menubar-separator { + overflow: hidden; +} .v-menubar-separator span { display: block; text-indent: -9999px; - height: 1px; - margin: 3px 0; + font-size: 1px; + line-height: 1px; + border-top: 1px solid #ddd; + margin: 3px 0 2px; overflow: hidden; - background: #ddd; } .v-menubar .v-icon, .v-menubar-submenu .v-icon { diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css index 5294a04291..2c508ca59e 100644 --- a/WebContent/VAADIN/themes/base/styles.css +++ b/WebContent/VAADIN/themes/base/styles.css @@ -645,46 +645,38 @@ div.v-app-loading { float: left; /* Force minimum width for button */ } -.v-ie6 .v-menubar { - float: left; /* Force minimum width in IE6 */ -} -.v-menubar table { - border-collapse: collapse; - padding: 0; - margin: 0; +.v-menubar { + float: left; /* Force minimum width */ + overflow: hidden; } .v-menubar .v-menubar-menuitem { cursor: default; vertical-align: middle; white-space: nowrap; + float: left; } -.v-menubar .v-menubar-menuitem * { +.v-menubar .v-menubar-menuitem-caption * { vertical-align: middle; + white-space: nowrap; } .v-menubar-submenu { background: #fff; } -.v-menubar-submenu table { - border-collapse: collapse; - padding: 0; - margin: 0; -} -.v-menubar-submenu table td { - white-space: nowrap; - padding: 0; - margin: 0; -} -.v-menubar-menuitem-selected{ +.v-menubar-menuitem-selected { background: #333; color: #fff; } .v-menubar-submenu .v-menubar-menuitem { cursor: default; - vertical-align: middle; - white-space: nowrap; + position: relative; + padding-right: 1.5em; } -.v-menubar-submenu .v-menubar-menuitem * { - vertical-align: middle; +.v-menubar-submenu .v-menubar-menuitem-caption { + display: block; +} +.v-menubar-submenu .v-menubar-menuitem *, +.v-menubar-submenu .v-menubar-menuitem-caption * { + white-space: nowrap; } .v-menubar-submenu-indicator { display: none; @@ -692,23 +684,12 @@ div.v-app-loading { font-family: arial, helvetica, sans-serif; } .v-menubar-submenu .v-menubar-submenu-indicator { - display: inline; - display: inline-block; - zoom: 1; - margin-left: 1em; - float: right; - height: 100%; - font-size: 0.9em; -} -.v-ie6 .v-menubar-submenu .v-menubar-submenu-indicator { + display: block; position: absolute; right: 0; - margin-right: 0; - margin-top: -2px; -} -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - position: relative; - margin-left: 0; + width: 1em; + height: 1em; + font-size: 0.9em; } .v-menubar-menuitem-disabled { color: #999; @@ -717,13 +698,17 @@ div.v-app-loading { /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } +.v-menubar-separator { + overflow: hidden; +} .v-menubar-separator span { display: block; text-indent: -9999px; - height: 1px; - margin: 3px 0; + font-size: 1px; + line-height: 1px; + border-top: 1px solid #ddd; + margin: 3px 0 2px; overflow: hidden; - background: #ddd; } .v-menubar .v-icon, .v-menubar-submenu .v-icon { diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css b/WebContent/VAADIN/themes/reindeer/menubar/menubar.css index e109a04681..ac60652d11 100644 --- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css +++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.css @@ -5,10 +5,7 @@ background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #d1d3d6; text-shadow: rgba(0,0,0,.9) 0 1px 0; -} -.v-menubar table { - margin: 0 8px; - height: 23px; + padding: 0 8px; } .v-menubar .v-menubar-menuitem { padding: 3px 8px; @@ -26,31 +23,27 @@ padding: 4px 0; } .v-menubar-submenu .v-menubar-menuitem { - padding: 1px 20px 1px 10px; - height: 16px; + padding: 1px 26px 1px 10px; line-height: 16px; } +.v-menubar-submenu .v-menubar-menuitem-caption * { + vertical-align: middle; +} .v-menubar .v-menubar-menuitem-selected, .v-menubar-submenu .v-menubar-menuitem-selected { background: #4d749f repeat-x; background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #fff; - text-shadow: #3b5a7a 0 1px 0; + text-shadow: 0 1px 0 #3b5a7a; } .v-menubar .v-menubar-menuitem-selected { background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } .v-menubar-submenu .v-menubar-submenu-indicator { background: transparent url(img/submenu-icon.png) no-repeat right 70%; - width: 16px; - margin: 0 -20px 0 5px; + width: 26px; + height: 16px; text-indent: -999px; - vertical-align: middle; -} -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - margin: 0 -20px 0 0; - position: relative; - right: -4px; } .v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator { background-image: url(img/submenu-icon-hover.png); diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css index d19dbab2a4..d94c7528f5 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.css +++ b/WebContent/VAADIN/themes/reindeer/styles.css @@ -645,46 +645,38 @@ div.v-app-loading { float: left; /* Force minimum width for button */ } -.v-ie6 .v-menubar { - float: left; /* Force minimum width in IE6 */ -} -.v-menubar table { - border-collapse: collapse; - padding: 0; - margin: 0; +.v-menubar { + float: left; /* Force minimum width */ + overflow: hidden; } .v-menubar .v-menubar-menuitem { cursor: default; vertical-align: middle; white-space: nowrap; + float: left; } -.v-menubar .v-menubar-menuitem * { +.v-menubar .v-menubar-menuitem-caption * { vertical-align: middle; + white-space: nowrap; } .v-menubar-submenu { background: #fff; } -.v-menubar-submenu table { - border-collapse: collapse; - padding: 0; - margin: 0; -} -.v-menubar-submenu table td { - white-space: nowrap; - padding: 0; - margin: 0; -} -.v-menubar-menuitem-selected{ +.v-menubar-menuitem-selected { background: #333; color: #fff; } .v-menubar-submenu .v-menubar-menuitem { cursor: default; - vertical-align: middle; - white-space: nowrap; + position: relative; + padding-right: 1.5em; } -.v-menubar-submenu .v-menubar-menuitem * { - vertical-align: middle; +.v-menubar-submenu .v-menubar-menuitem-caption { + display: block; +} +.v-menubar-submenu .v-menubar-menuitem *, +.v-menubar-submenu .v-menubar-menuitem-caption * { + white-space: nowrap; } .v-menubar-submenu-indicator { display: none; @@ -692,23 +684,12 @@ div.v-app-loading { font-family: arial, helvetica, sans-serif; } .v-menubar-submenu .v-menubar-submenu-indicator { - display: inline; - display: inline-block; - zoom: 1; - margin-left: 1em; - float: right; - height: 100%; - font-size: 0.9em; -} -.v-ie6 .v-menubar-submenu .v-menubar-submenu-indicator { + display: block; position: absolute; right: 0; - margin-right: 0; - margin-top: -2px; -} -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - position: relative; - margin-left: 0; + width: 1em; + height: 1em; + font-size: 0.9em; } .v-menubar-menuitem-disabled { color: #999; @@ -717,13 +698,17 @@ div.v-app-loading { /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } +.v-menubar-separator { + overflow: hidden; +} .v-menubar-separator span { display: block; text-indent: -9999px; - height: 1px; - margin: 3px 0; + font-size: 1px; + line-height: 1px; + border-top: 1px solid #ddd; + margin: 3px 0 2px; overflow: hidden; - background: #ddd; } .v-menubar .v-icon, .v-menubar-submenu .v-icon { @@ -3105,10 +3090,7 @@ td.v-datefield-calendarpanel-nextyear { background-position: left -380px; color: #d1d3d6; text-shadow: rgba(0,0,0,.9) 0 1px 0; -} -.v-menubar table { - margin: 0 8px; - height: 23px; + padding: 0 8px; } .v-menubar .v-menubar-menuitem { padding: 3px 8px; @@ -3126,10 +3108,12 @@ td.v-datefield-calendarpanel-nextyear { padding: 4px 0; } .v-menubar-submenu .v-menubar-menuitem { - padding: 1px 20px 1px 10px; - height: 16px; + padding: 1px 26px 1px 10px; line-height: 16px; } +.v-menubar-submenu .v-menubar-menuitem-caption * { + vertical-align: middle; +} .v-menubar .v-menubar-menuitem-selected, .v-menubar-submenu .v-menubar-menuitem-selected { background: #4d749f repeat-x; @@ -3137,7 +3121,7 @@ td.v-datefield-calendarpanel-nextyear { -background-image: url(common/img/vertical-sprites-ie6.png); background-position: left -403px; color: #fff; - text-shadow: #3b5a7a 0 1px 0; + text-shadow: 0 1px 0 #3b5a7a; } .v-menubar .v-menubar-menuitem-selected { background-image: url(common/img/vertical-sprites.png); @@ -3146,15 +3130,9 @@ td.v-datefield-calendarpanel-nextyear { } .v-menubar-submenu .v-menubar-submenu-indicator { background: transparent url(menubar/img/submenu-icon.png) no-repeat right 70%; - width: 16px; - margin: 0 -20px 0 5px; + width: 26px; + height: 16px; text-indent: -999px; - vertical-align: middle; -} -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - margin: 0 -20px 0 0; - position: relative; - right: -4px; } .v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator { background-image: url(menubar/img/submenu-icon-hover.png); diff --git a/WebContent/VAADIN/themes/runo/menubar/menubar.css b/WebContent/VAADIN/themes/runo/menubar/menubar.css index 324713db6e..7c1a4036b3 100644 --- a/WebContent/VAADIN/themes/runo/menubar/menubar.css +++ b/WebContent/VAADIN/themes/runo/menubar/menubar.css @@ -3,12 +3,13 @@ border-left: 1px solid #c6cbcc; } .v-menubar .v-menubar-menuitem { - padding: 0 10px; - margin: 0 10px; + padding: 1px 10px; border: 1px solid #c6cbcc; border-left: none; + height: 18px; + line-height: 18x; } -.v-menubar .v-menubar-menuitem-selected { +.v-menubar-menuitem-selected { color: #fff; background: #5daee8; } @@ -24,17 +25,11 @@ border-left: 1px solid #d0d4d5; } .v-menubar-submenu .v-menubar-menuitem { - padding: 2px 16px 2px 10px; + padding-top: 1px; + padding-bottom: 1px; + line-height: 16px; + padding-left: 10px; } -.v-menubar-submenu .v-menubar-menuitem-selected { - color: #fff; - background: #5daee8; -} -.v-menubar-submenu .v-menubar-submenu-indicator { - margin-right: -12px; - height: 14px; -} -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - margin-right: -12px; - right: -3px; +.v-menubar-submenu .v-menubar-menuitem-caption * { + vertical-align: middle; } \ No newline at end of file diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css index 98c918c649..0ae0f686f0 100644 --- a/WebContent/VAADIN/themes/runo/styles.css +++ b/WebContent/VAADIN/themes/runo/styles.css @@ -645,46 +645,38 @@ div.v-app-loading { float: left; /* Force minimum width for button */ } -.v-ie6 .v-menubar { - float: left; /* Force minimum width in IE6 */ -} -.v-menubar table { - border-collapse: collapse; - padding: 0; - margin: 0; +.v-menubar { + float: left; /* Force minimum width */ + overflow: hidden; } .v-menubar .v-menubar-menuitem { cursor: default; vertical-align: middle; white-space: nowrap; + float: left; } -.v-menubar .v-menubar-menuitem * { +.v-menubar .v-menubar-menuitem-caption * { vertical-align: middle; + white-space: nowrap; } .v-menubar-submenu { background: #fff; } -.v-menubar-submenu table { - border-collapse: collapse; - padding: 0; - margin: 0; -} -.v-menubar-submenu table td { - white-space: nowrap; - padding: 0; - margin: 0; -} -.v-menubar-menuitem-selected{ +.v-menubar-menuitem-selected { background: #333; color: #fff; } .v-menubar-submenu .v-menubar-menuitem { cursor: default; - vertical-align: middle; - white-space: nowrap; + position: relative; + padding-right: 1.5em; } -.v-menubar-submenu .v-menubar-menuitem * { - vertical-align: middle; +.v-menubar-submenu .v-menubar-menuitem-caption { + display: block; +} +.v-menubar-submenu .v-menubar-menuitem *, +.v-menubar-submenu .v-menubar-menuitem-caption * { + white-space: nowrap; } .v-menubar-submenu-indicator { display: none; @@ -692,23 +684,12 @@ div.v-app-loading { font-family: arial, helvetica, sans-serif; } .v-menubar-submenu .v-menubar-submenu-indicator { - display: inline; - display: inline-block; - zoom: 1; - margin-left: 1em; - float: right; - height: 100%; - font-size: 0.9em; -} -.v-ie6 .v-menubar-submenu .v-menubar-submenu-indicator { + display: block; position: absolute; right: 0; - margin-right: 0; - margin-top: -2px; -} -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - position: relative; - margin-left: 0; + width: 1em; + height: 1em; + font-size: 0.9em; } .v-menubar-menuitem-disabled { color: #999; @@ -717,13 +698,17 @@ div.v-app-loading { /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } +.v-menubar-separator { + overflow: hidden; +} .v-menubar-separator span { display: block; text-indent: -9999px; - height: 1px; - margin: 3px 0; + font-size: 1px; + line-height: 1px; + border-top: 1px solid #ddd; + margin: 3px 0 2px; overflow: hidden; - background: #ddd; } .v-menubar .v-icon, .v-menubar-submenu .v-icon { @@ -2233,12 +2218,13 @@ div.v-tree-node-leaf { border-left: 1px solid #c6cbcc; } .v-menubar .v-menubar-menuitem { - padding: 0 10px; - margin: 0 10px; + padding: 1px 10px; border: 1px solid #c6cbcc; border-left: none; + height: 18px; + line-height: 18x; } -.v-menubar .v-menubar-menuitem-selected { +.v-menubar-menuitem-selected { color: #fff; background: #5daee8; } @@ -2254,19 +2240,13 @@ div.v-tree-node-leaf { border-left: 1px solid #d0d4d5; } .v-menubar-submenu .v-menubar-menuitem { - padding: 2px 16px 2px 10px; -} -.v-menubar-submenu .v-menubar-menuitem-selected { - color: #fff; - background: #5daee8; -} -.v-menubar-submenu .v-menubar-submenu-indicator { - margin-right: -12px; - height: 14px; + padding-top: 1px; + padding-bottom: 1px; + line-height: 16px; + padding-left: 10px; } -.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator { - margin-right: -12px; - right: -3px; +.v-menubar-submenu .v-menubar-menuitem-caption * { + vertical-align: middle; } .v-Notification { diff --git a/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java b/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java index 961564d9d8..e5b0c4e32b 100644 --- a/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java +++ b/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java @@ -5,6 +5,7 @@ import java.util.Iterator; import java.util.List; import java.util.Stack; +import com.google.gwt.dom.client.NodeList; import com.google.gwt.event.logical.shared.CloseEvent; import com.google.gwt.event.logical.shared.CloseHandler; import com.google.gwt.user.client.Command; @@ -19,6 +20,7 @@ import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.UIObject; import com.google.gwt.user.client.ui.Widget; import com.vaadin.terminal.gwt.client.ApplicationConnection; +import com.vaadin.terminal.gwt.client.BrowserInfo; import com.vaadin.terminal.gwt.client.ContainerResizedListener; import com.vaadin.terminal.gwt.client.Paintable; import com.vaadin.terminal.gwt.client.UIDL; @@ -68,19 +70,12 @@ public class VMenuBar extends Widget implements Paintable, popup = null; visibleChildMenu = null; - Element table = DOM.createTable(); - Element tbody = DOM.createTBody(); - DOM.appendChild(getElement(), table); - DOM.appendChild(table, tbody); + containerElement = getElement(); if (!subMenu) { setStylePrimaryName(CLASSNAME); - Element tr = DOM.createTR(); - DOM.appendChild(tbody, tr); - containerElement = tr; } else { setStylePrimaryName(CLASSNAME + "-submenu"); - containerElement = tbody; } this.subMenu = subMenu; @@ -88,6 +83,11 @@ public class VMenuBar extends Widget implements Paintable, | Event.ONLOAD); } + @Override + public void setWidth(String width) { + Util.setWidthExcludingPaddingAndBorder(this, width, 0); + } + /** * This method must be implemented to update the client-side component from * UIDL data received from server. @@ -180,6 +180,8 @@ public class VMenuBar extends Widget implements Paintable, + ">►"); } + itemHTML.append(""); if (item.hasAttribute("icon")) { itemHTML .append("\"\""); } - - itemHTML.append(Util.escapeHTML(itemText)); + itemHTML.append(Util.escapeHTML(itemText) + ""); if (itemHasCommand) { // Construct a command that fires onMenuClick(int) with the @@ -265,7 +266,7 @@ public class VMenuBar extends Widget implements Paintable, * Remove all the items in this menu */ public void clearItems() { - Element e = getContainingElement(); + Element e = getContainerElement(); while (DOM.getChildCount(e) > 0) { DOM.removeChild(e, DOM.getChild(e, 0)); } @@ -277,33 +278,10 @@ public class VMenuBar extends Widget implements Paintable, * * @return */ - public Element getContainingElement() { + public Element getContainerElement() { return containerElement; } - /** - * Returns a new child element to add an item to - * - * @param index - * the index in which point to add a new element in a submenu. -1 - * will add the new element as the last child (append) - * - * @return - */ - public Element getNewChildElement(int index) { - if (subMenu) { - Element tr = DOM.createTR(); - if (index == -1) { - DOM.appendChild(getContainingElement(), tr); - } else { - DOM.insertChild(getContainingElement(), tr, index); - } - return tr; - } else { - return getContainingElement(); - } - } - /** * Add a new item to this menu * @@ -328,7 +306,7 @@ public class VMenuBar extends Widget implements Paintable, if (items.contains(item)) { return; } - DOM.appendChild(getNewChildElement(-1), item.getElement()); + DOM.appendChild(getContainerElement(), item.getElement()); item.setParentMenu(this); item.setSelected(false); items.add(item); @@ -338,11 +316,7 @@ public class VMenuBar extends Widget implements Paintable, if (items.contains(item)) { return; } - if (subMenu) { - DOM.appendChild(getNewChildElement(index), item.getElement()); - } else { - DOM.insertChild(getNewChildElement(-1), item.getElement(), index); - } + DOM.insertChild(getContainerElement(), item.getElement(), index); item.setParentMenu(this); item.setSelected(false); items.add(index, item); @@ -356,9 +330,9 @@ public class VMenuBar extends Widget implements Paintable, public void removeItem(CustomMenuItem item) { if (items.contains(item)) { int index = items.indexOf(item); - Element container = getContainingElement(); - DOM.removeChild(container, DOM.getChild(container, index)); + DOM.removeChild(getContainerElement(), DOM.getChild( + getContainerElement(), index)); items.remove(index); } } @@ -498,6 +472,7 @@ public class VMenuBar extends Widget implements Paintable, final int shadowSpace = 10; popup = new VOverlay(true, false, true); + popup.setStylePrimaryName(CLASSNAME + "-popup"); popup.setWidget(item.getSubMenu()); popup.addCloseHandler(this); popup.addAutoHidePartner(item.getElement()); @@ -537,6 +512,21 @@ public class VMenuBar extends Widget implements Paintable, } popup.setPopupPosition(left, top); } + + // IE7 really tests one's patience sometimes + // Part of a fix to correct #3850 + if (BrowserInfo.get().isIE7()) { + popup.getElement().getStyle().setProperty("zoom", ""); + DeferredCommand.addCommand(new Command() { + public void execute() { + if (popup.getElement().getStyle().getWidth() == null + || popup.getElement().getStyle().getWidth() == "") { + popup.setWidth(popup.getOffsetWidth() + "px"); + } + popup.getElement().getStyle().setProperty("zoom", "1"); + } + }); + } } /** @@ -663,13 +653,14 @@ public class VMenuBar extends Widget implements Paintable, protected boolean isSeparator = false; public CustomMenuItem(String html, Command cmd) { - setElement(DOM.createTD()); + setElement(DOM.createDiv()); setHTML(html); setCommand(cmd); setSelected(false); setStylePrimaryName(CLASSNAME + "-menuitem"); + } public void setSelected(boolean selected) { @@ -715,6 +706,13 @@ public class VMenuBar extends Widget implements Paintable, public void setHTML(String html) { this.html = html; DOM.setInnerHTML(getElement(), html); + if (BrowserInfo.get().isIE6() && client != null) { + // Find possible icon element + final NodeList imgs = getElement().getElementsByTagName("IMG"); + if (imgs.getLength() > 0) { + client.addPngFix((Element) imgs.getItem(0).cast()); + } + } } public String getText() { @@ -722,7 +720,7 @@ public class VMenuBar extends Widget implements Paintable, } public void setText(String text) { - setHTML(text); + setHTML(Util.escapeHTML(text)); } public void setEnabled(boolean enabled) { @@ -775,9 +773,7 @@ public class VMenuBar extends Widget implements Paintable, // Measure available space int availableWidth = getElement().getClientWidth(); - final int rootWidth = getElement().getFirstChildElement() - .getOffsetWidth(); - int diff = availableWidth - rootWidth; + int diff = availableWidth - getConsumedWidth(); removeItem(moreItem); @@ -824,4 +820,14 @@ public class VMenuBar extends Widget implements Paintable, } } + private int getConsumedWidth() { + int w = 0; + for (CustomMenuItem item : getItems()) { + if (!collapsedRootItems.getItems().contains(item)) { + w += item.getOffsetWidth(); + } + } + return w; + } + } -- 2.39.5