Search jQuery

jQuery Forum

menu widget broken (?) after update to 1.11.0

in Using jQuery UI • 8 years ago

Hi everybody,

I'm looking for some help for an issue I am facing: I have just updated jQuery UI in our web app, and the menu widget started behaving differently than before:

1. the menu no longer has rounded border

2. when a menu has a submenu opened on hover, the submenu text is white/hidden

I am attaching two images that display the same menu before and after the update.

The menu itself is a nested set of <ul/> which contain <li/> which contain <a/> tags.

I'd like to stress that I made no change whatsoever, I only update jQuery UI from 1.10.4 to 1.11.0, both js and css files.

Attachments

after.png
Size : 4.3 KB Downloads : 195 Download
before.png
Size : 4.35 KB Downloads : 190 Download

Replies(6)

jakecigar

Re: menu widget broken (?) after update to 1.11.0

8 years ago

Did you update the CSS along with the jQuery code?

Did you reuse the same name for the CSS file and not clear the cache?

Does it work any better when you use

<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

If that’s not it, please share a link to the problem page.

JΛ̊KE

tasso85

Re: menu widget broken (?) after update to 1.11.0

8 years ago

The CSS was update, as I stated in my original post.

Yes, it has the same name, but I forced a cache clear (more than once), and I have the browser set with cache disabled anyway.

I'll try to setup a fiddle for it, I cannot share a link to the page since it is on my development machine on localhost.

EDIT: here it is http://jsfiddle.net/ucF9M/ but it does not show the error, except for the missing round borders... Still, on the web app doesn't work, and yet I have replicated all the relevant code and all CSS..

EDIT 2: we use a custom theme, which I have not replicated there, using a standard theme, could this be it?

tasso85

Re: menu widget broken (?) after update to 1.11.0

8 years ago

It IS the custom theme! Switching to a default theme it works properly... How can I correct the custom theme?

To update the custom theme I did this:
- open the CSS of the theme version 1.10.4
- go to the URL specified in CSS
- download the theme again

Yet the problem persists...

EDIT: here you can see the problem http://jsfiddle.net/ucF9M/1/

The problem is the following: our custom theme sets a blue background color and a white font when hovering on a button/menu, but the hover font color is "applied" to the submenu too, even if it is not really hovered, so it gets a white font on a white background, which is our default for non-hovered items.

However, this did not happen with the previous version, so I would call it a "bug", or is it a misconfiguration of mine? If so, how can I fix it?

EDIT 2: ok, I found the problem: using jQuery UI v1.10.4, the .ui-state-focus class is applied to the specific <a/> tag I am hovering, while with v1.11.0 the class is applied to its parent <li/> element, and with it, to all of its submenus! This definitely seems a bug to me.

tward392

Re: menu widget broken (?) after update to 1.11.0

8 years ago

The round corners were part of a change in 1.11.0, see here:

http://jqueryui.com/upgrade-guide/1.11/#simplify-styling-remove-rounded-corners-reduce-spacing

to get the rounded corners back, I added the following class back to my menus:

class="ui-corner-all"

jakecigar