• Do not register here on develop.twiki.org, login with your twiki.org account.
• Use View topic Item7848 for generic doc work for TWiki-6.1.1. Use View topic Item7851 for doc work on extensions that are not part of a release. More... Close
• Anything you create or change in standard webs (Main, TWiki, Sandbox etc) will be automatically reverted on every SVN update.
Does this site look broken?. Use the LitterTray web for test cases.

Item7548: The CSS margin definition of tab(JQTAB) headers need to take precedence.

Item Form Data

AppliesTo: Component: Priority: CurrentState: WaitingFor: TargetRelease ReleasedIn
Extension JQueryPlugin Normal Closed TWiki:Main.YaojunFei n/a  

Edit Form Data

Reported By:
Applies To:
Current State:
Waiting For:
Target Release:
Released In:


To define the margin between two tab headers of %JQTAB%, there was a line in jquery-all.css:

ul.jqTabGroup li {margin: 0px 7px 0px 0px !important}

But the highlighted "!important" was removed since its revision 27914. As “ul.jqTabGroup li” definition is specifically for %JQTAB%, it needs to take precedence to avoid being overwritten by other CSS definition.

-- TWiki:Main/YaojunFei - 2014-09-02

Was there an issue with this change? I did that at Item7544 so that it is possible to have custom margin between tabs. Does that break anything? Custom margin is no longer possible since you reverted the change. Just trying to understand the impact.

-- TWiki:Main.PeterThoeny - 2014-09-02

"ul.jqTabGroup li" can be easily overwritten by other irrelevant definitions like "ul > li" or "ul li" etc. So adding "!<nop>important" can make sure margin definition specific to JQTAB's tab header takes precedence. But still other user can custom margin with the "!<nop>important" decoration like this "ul.jqTabGroup li {margin: ... !<nop>important}".

-- TWiki:Main.YaojunFei - 2014-09-03

I was not aware that the !important can be overloaded by another !important. Let me try this.

-- TWiki:Main.PeterThoeny - 2014-09-03

I checked, with static CSS it is possible to redefine a margin with !important. However, the JQTAB uses dynamic Javascript, and with Javascript it is not possible to redefine an !important.

Example at Item7544 that worked with previous code, e.g. before this Item7548 fix:

$(document).ready(function () {
  $("#demo .jqTabGroup li").eq(2).css("margin-left", "100px");

I tried this and it did not work:

$(document).ready(function () {
  $("#demo .jqTabGroup li").eq(2).css("margin-left", "100px !important");

I think it is better to avoid using !important where possible. See article http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/ describing the disadvantages of using it.

Instead of a very generic ul > li or ul li I recommend more specific like .someClass ul > li or #someID ul li. This negates the need of !important in the JQTAB. What do you think?

-- TWiki:Main.PeterThoeny - 2014-09-03

Yes, I agree. I'll roll back the changes.

-- TWiki:Main.YaojunFei - 2014-09-03

Changes to trunk and TWikiRelease06x00 branch were reverted.

-- TWiki:Main.YaojunFei - 2014-09-03

OK, thank you!

-- TWiki:Main.PeterThoeny - 2014-09-03

Shall we change margin's selector "ul.jqTabGroup li {margin: xxxx}" to "div.jqTabPane ul.jqTabGroup li"? Thus it has more specificity to JQTAB's tab header.

-- TWiki:Main.YaojunFei - 2014-09-03

In our customized skin, we're using an selector like ".someClass ui > li", which has same precedence as a selector "ul.jqTabGroup li". So the margin definition in "ul.jqTabGroup li" still can be overridden by ".someClass ui > li". To make sure ".someClass ui > li" is overridden, jquery-all.css has to have something more specific than "ul.jqTabGroup li". Hence "div.jqTabPane ul.jqTabGroup li" is necessary.

-- TWiki:Main.YaojunFei - 2014-09-03

OK, sounds good. Make sure to fix also jquery.tabpane.css, which is the master used to build jquery-all.css.

-- TWiki:Main.PeterThoeny - 2014-09-05

Thanks for your reminder, Peter. Now I made the same change to jquery.tabpane.css in both trunk and branch TWikiRelease06x00.

-- TWiki:Main.YaojunFei - 2014-09-09

Thanks Yaojun!

-- TWiki:Main.PeterThoeny - 2014-09-10

Summary The CSS margin definition of tab(JQTAB) headers need to take precedence.
ReportedBy TWiki:Main.YaojunFei
Codebase 6.0.0, 5.1.4
SVN Range TWiki-6.0.1-trunk, Thu, 07 Aug 2014, build 27861
AppliesTo Extension
Component JQueryPlugin
Priority Normal
CurrentState Closed
WaitingFor TWiki:Main.YaojunFei
Checkins TWikirev:27978 TWikirev:27979 TWikirev:27980 TWikirev:27981 TWikirev:27982 TWikirev:27983 TWikirev:27984 TWikirev:27985 TWikirev:27986 TWikirev:27987 TWikirev:28040 TWikirev:28041
TargetRelease n/a

Edit | Attach | Watch | Print version | History: r26 < r25 < r24 < r23 < r22 | Backlinks | Raw View |  Raw edit | More topic actions
Topic revision: r26 - 2014-09-10 - PeterThoeny
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback