I'm using a GRAILS UI (1.2-SNAPSHOT) an it's implementation of the YUI menubar (YUI 2.7.0.1). I am seeing flakey mouseover behavior in IE (Firefox is ok). When I mouse over the menu item with a submenu, it will show. As I try to mouse over the sub-menu, the submenu disappears before I can click. This happends in a pattern I haven't fully figured out. Usually the first time I select a menu it's fine but if I move around the menu back to a menu item, the submenu begins to display this behavior. By clicking and holding the mouse button I can usually get the sub-menu to stick around.
I've palyed with various configurations like keepopen and automenudisplay but they don't seem to change the behavior. I have not seen much posted about this. But I also don't see menu's documented in the UI plugin either. I could really use some feedback if UI menu is not ready for primetime yet or I'm missing something else. I've not worked with much AJAX before.
Below is the code with the added options I played with that did not have a positive impact.
<gui:menubar id='menubar' renderTo='mainmenu' autosubmenudisplay="false" shadow="true" keepopen="true">
<gui:menuitem url="/esmzone">Home</gui:menuitem>
<gui:submenu label='Profile'>
<gui:menuitem url="${createLink(controller:'memberProfile', action:'view')}">View</gui:menuitem>
<gui:menuitem url="${createLink(controller:'memberProfile', action:'profile')}">Edit</gui:menuitem>
<gui:menuitem url="${createLink(controller:'user', action:'account')}">Settings</gui:menuitem>
<gui:menuitem url="#">Subscription</gui:menuitem>
</gui:submenu>
Here is the code generated by the plugin:
<script>
YAHOO.util.Event.onDOMReady(function() {
GRAILSUI.menubar = new YAHOO.widget.MenuBar("menubar_div", {'autosubmenudisplay': false,
'shadow': true,
'keepopen': true});
GRAILSUI.menubar.render('mainmenu');
});
</script>
I made some progress on this by researching the YUI library. There is a documented bug with IE7. Apparently the grails-ui plugin does not address the fix. I'm testing with IE8 but I assume it's still there.
http://developer.yahoo.com/yui/menu/#knownissues
It appears that you should set the zoom property to 1 (zoom:1) for the bd class.
I added the following code to my style sheet
div.yuimenubar .bd {
zoom: 1;
}
and it seems to help. I see no side effect in Firefox but I didn't dynamically check for the version of browser as I would need to hack the code that generates the YUI javascript and put in
if (YAHOO.env.ua.ie === 7) {
YAHOO.util.Dom.addClass(document.body, "ie7");
}
after the render() call. Then instead of the style I added you could do an IE7 (probably >=7) style.
This is what the Yahoo site had to say about it:
The following application of
"zoom:1" sets the "hasLayout"
property to "true" and prevents
first tier submenus of a MenuBar
from hiding when the mouse is moving
from an item in a MenuBar to a
submenu in IE 7.
For more on the "hasLayout" property:
http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx
Related
I used the latest Vaadin Start page to generate an app skeleton (Vaadin 21 / Java 11)
It works so far, I used hybrid mode with various views.
When clicking view links in the menu only TS+HTML based views will register in the GUI as selected and get a colored "selected/active" styling.
When I generate an app which only has Flow views, the first view will be stuck with the selected styling, but other views will register properly when clicked.
Only when I generate an app which only has Fusion views, all view selects will properly register.
I guess this is a bug?
Edit: video of the behavior when in hybrid mode. The menu item names correspond to the type of view which is being selected. As you can see only fusion views show the "select" in the menu:
Edit2: I think the problem is caused here:
?highlight=${viewRoute.path == appStore.location
Seems like the appStore.location is not being set from non-Fusion views. I put a console.log in the index.ts eventListener and non-Fusion views all just pass "(.*)" as the view name/location, which is the reasion why this fails.
So the #Route(value = "view-name") declaration in the java-class seems not to be passed properly at the moment.
BR
Daniel
This seems to be a bug in the Start project templates. I added an issue in our internal issue tracker.
Thanks a lot for reporting.
Edit: the issue is already fixed.
The question is not very clear to me, but if the problem is the fact that "the first view will be stuck with the selected styling", have you tried to add setAutoselect(false) to the tabbed menu in your MainLayout?
Here it is:
private Tabs createMenu() {
final Tabs tabs = new Tabs();
tabs.setOrientation(Tabs.Orientation.VERTICAL);
tabs.addThemeVariants(TabsVariant.LUMO_MINIMAL);
tabs.setId("tabs");
tabs.setAutoselect(false); //Needed not to select first tab by default
tabs.add(createMenuItems());
return tabs;
}
I want to create a button-like component with ripple animation and it looks like this:
<div>Button</div>
<material-ripple></material-ripple>
In the past, this works fine because when I click on this custom element, I actually clicks on material-ripple and the click event bubbles to the host element.
As of angular_components 0.5.1, material-ripple shows a centered ripple on keypress. This is different from clicking because the event target is the host element itself and not the ripple component.
Is there a way that I can pass a keypress event down to the material-ripple, so that the ripple animation would be played? Or is there a way to play the animation programmatically?
After some research, I've come up with a solution using dart:html.
#ViewChild(MaterialRippleComponent, read: ElementRef)
ElementRef materialRipple;
#HostListener('keydown', const [r'$event'])
void passKeyDown(KeyboardEvent event) {
(materialRipple.nativeElement as HtmlElement).dispatchEvent(
new KeyEvent('keydown', keyCode: event.keyCode, canBubble: false)
.wrapped);
}
Although this does not work in Dartium due to some bugs around KeyEvent and KeyboardEvent, it works fine in Chrome.
Our app is using 1+ toolbars written using add-on sdk. The problem is, right now the toolbars seems to decide for themselves in which order they will get displayed. In the first window I have toolbar A below toolbar B. However, if I open a new window, toolbar B will be on top.
Anybody else encountered this issue? Do you guys have any tips on how to deal with it?
Thanks!
Luka
EDIT: attaching a code that shows how I create toolbars:
this.myframe = new ui.Frame({
url: self.data.url(this.LABELS.TRANSLATION_FRAME)
});
this.mytoolbar = ui.Toolbar({
title: this.NAME,
items: [this.myframe],
hidden: true
});
The second toolbar has the same three arguments (title, items, hidden) and both frames contain a properly structured, very minimal html files.
These toolbars reside in two separate extensions. If both are enabled, as I mentioned above, the ordering seems to be pretty random.
I have an HTA which opens a showmodaldialog and this JavaScript code in the dialog page:
function helpButton(){
document.body.style.curosor = "help";
my_div.onclick = function(){alert("Help for the div is displayed here")}
}
I want a help button in the title bar of the showmodaldialog, like on the picture below:
(don't mind about the fact that the picture's in French, it's my computer's language)
When I push on that help button, I want it to execute the helpButton() function.
There was showModalDialog('path', 'arg', 'help:yes'); and you could attach an onhelp handler within the opened dialog's window. However, this dialog property is obsoleted - since IE9, if I'd recall correctly - and can't be returned by downgrading the app using X-UA when running a HTA with a newer IE.
You still can set onhelp, and call it by hitting F1:
window.onhelp = function () {
alert('Help is asked.');
};
I have a form inside jQuery tabs; I create tabs in a simple way:
$("#tabs").tabs({selected: 1});
The selected index 1 is the tab where form is placed. The problem is, on remote computer with IE6 both selects only display a small blank line instead of list with options when dropdown arrow is clicked:
Incorrect dropdown http://queen3.at.tut.by/DropDownIE6jQuery.PNG
The options are there in page source, and everything actually works on other machines, in other browsers and also in IE6 (though I use IETester).
Everything also works if I
remove tabs creation, that is .tabs() - options do appear and work; or
first select tab without form (tab 0), and then click on it - options do appear and work
only when clicking; programmatic .tabs("select", 1) after tabs creation doesn't help
Does anyone know what can cause this? Is it IE6 bug or something with my scripts?
Update: hm, thanks to this, I found it's something with my CSS - if I disable Site.css it works. I thought about scripts only. Still have to find out what's that.
Update: OK, this was caused by this CSS rule:
body { font-size: 0.7em; }
It works if I set 0.8 or greater, but for 0.7 and less IE6 does the indicated bug.
Can someone explain this? Yes it is IE6 - weird by definition, but this one is too weird in my opinion.
I have also ran into this exact problem, although I couldn't fix it by altering any body font sizes, I did manage to get around it using the (slightly modified) "Ugly hack" method as described in the dev.jqueryui.com/ticket/4734 link, posted by CiscoIPPhone:
// Ugly hack to switch tabs in IE6, fixing select menu bug.
if($.browser.msie && $.browser.version.substr(0, 1) <= 6) {
$("#tabs").tabs({ selected: 1 });
setTimeout(function() {
$("#tabs").tabs("select", 0);
}, 10);
}
Seems as though the timeout is the key to avoiding this bug.
I found that this workaround fixed the issue on some machines, but not on others.
My solution was to hide all the select elements initally in the style sheet, then after calling $( "#tabs" ).tabs() I use $('select').show() to display them.
That fixed it for me.