Skip to main content

Search and Top Navigation

#8255 closed bug (notabug)

Opened April 12, 2012 06:38PM UTC

Closed April 12, 2012 07:08PM UTC

Last modified April 13, 2012 03:56PM UTC

jquery ui tabs : tab selected is missing classes applied and classes removed.

Reported by: tadudek Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: git (not yet released)
Keywords: Cc:
Blocked by: Blocking:
Description

It seems that with the milestone version of (using m7) that the selected tab list item incorrectly has classes applied:

http://jsfiddle.net/tadudek/pkbcP/6/

1.64

Selected Tab
class="ui-corner-top ui-tabs-selected ui-state-active"

ui-corner-top  //appeares in both
ui-tabs-selected
ui-state-active //appeares in both

http://jsfiddle.net/tadudek/pkbcP/11/

1.9m7

Selected Tab
class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"

ui-state-default //looks like it's not removed
ui-corner-top //appeares in both
ui-tabs-active 
ui-state-active //appeares in both

MISSING CLASS :ui-tabs-selected
not-selected tabs for both versions tested
class="ui-corner-top ui-state-default"

This causes the bottom of the selected tab to still look detached. I had to manually copy in the entire 1.9m7 release into the jsfiddle javascript block because I didn't see anyone hosting this version.

Hope this helps!

Attachments (0)
Change History (6)

Changed April 12, 2012 07:08PM UTC by scottgonzalez comment:1

resolution: → invalid
status: newclosed

It's not valid to use a 1.8.x theme with 1.9 JavaScript.

Changed April 12, 2012 07:20PM UTC by tadudek comment:2

Replying to [comment:1 scott.gonzalez]:

It's not valid to use a 1.8.x theme with 1.9 JavaScript.

ouch, not backwards compatible? Is there a themeroller for 1.9 yet?

Changed April 12, 2012 07:26PM UTC by scottgonzalez comment:3

No ThemeRoller yet. Themes are never backward compatible; we don't even support using a 1.8.17 theme with 1.8.18 JavaScript.

Changed April 12, 2012 07:34PM UTC by tadudek comment:4

Replying to [comment:3 scott.gonzalez]:

No ThemeRoller yet. Themes are never backward compatible; we don't even support using a 1.8.17 theme with 1.8.18 JavaScript.

Well, thought I had something there for ya, but thanks. I appreciate the quick reply Scott.

As a note: I had to move to 1.9 to get the tab bug fix for: http://bugs.jqueryui.com/ticket/5069. But can't use the fixed js with earlier css versions; which in my case is customized. So. I appreciate the help, you've been on top of my questions all day, but I guess I'll have to wait for the full release, or manually fix (i.e. create workaround) the previous stable version to deal with the tab building problem. Again, thanks for the help and direction.

Changed April 12, 2012 07:53PM UTC by scottgonzalez comment:5

The theme-related settings are all in jquery.ui.theme.css, so if you just use your existing one with the new jquery.ui.tabs.css (and any other widget css), it *should* work. No promises though :-)

Here's a diff of the themes directory from 1-8-stable to master: https://gist.github.com/2370542

Changed April 13, 2012 03:56PM UTC by tadudek comment:6

Replying to [comment:5 scott.gonzalez]:

The theme-related settings are all in jquery.ui.theme.css, so if you just use your existing one with the new jquery.ui.tabs.css (and any other widget css), it *should* work. No promises though :-) Here's a diff of the themes directory from 1-8-stable to master: https://gist.github.com/2370542

Scott, just wanted to follow up (not sure if there is a better place than on your ticketing system), I took your idea, and from building a simple mockup example it works great. I'm not sure how it'd affect everything in all cases, but again, I'm just mocking some use case examples up for my offshore team. So Thanks. All I did was:

<link type="text/css" href="${pageContext.request.contextPath}/tmihome/styles/jquery_ui.css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />

<link type="text/css" href="${pageContext.request.contextPath}/tmihome/styles/jquery_ui.css/1.9m7/base/jquery.ui.tabs.css" rel="stylesheet" />

and bam.. looks good. Much appreciated.