I am using a tabview controller to display my contents in tabbed format to the user when he visits a page, but unfortunately its not producing expected output because of some CSS conflicts i believe.

Have attached images to depict the exact happening. One image which shows the normal behavior of my tabview controller, whereas deco breaking the display.

FYI : the functionality part works fine.

Steps to reproduce :

1. Create a page with some title and menu string
2. And paste the below code in the content area



<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/history/history-min.js"></script>
</head>

<body class="yui-skin-sam">
<style>

#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px; /* avoid scrollbars */
  visibility:hidden;
}

#demo { margin-bottom:1em; }

</style>

<iframe id="yui-history-iframe" src="assets/blank.html"></iframe>

<input id="yui-history-field" type="hidden">

<div id="demo" class="yui-navset yui-navset-top">
  <ul class="yui-nav">
    <li><a href="#tab1"> <em>Tab One Label</em></a></li>
    <li title="active" class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
    <li title="" class=""><a href="#tab3"><em>Tab Three Label</em></a></li>
  </ul>

  <div class="yui-content">
    <div id="tab1"><p>True online double conversion UPS <br />Galvanized isolation <br />Capacity  1 kVA — 160 kVA</p></div>
    <div id="tab2"><p>1 kVA — 36 V 
2 kVA — 96 V
3 kVA — 96 V
10 kVA / 20 kVA — 240 V
</p></div>
    <div id="tab3"><p>1 KVA to 1000 KVA. </p></div>
  </div>
</div>

<script>

(function () {

    // The initially selected tab will be chosen in the following order:
    //
    // URL fragment identifier (it will be there if the user previously
    // bookmarked the application in a specific state)
    //
    //         or
    //
    // "tab0" (default)

    var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState("tabview");
    var initialTabViewState = bookmarkedTabViewState || "tab0";

    var tabView;

    // Register our TabView module. Module registration MUST
    // take place before calling YAHOO.util.History.initialize.
    YAHOO.util.History.register("tabview", initialTabViewState, function (state) {
        // This is called after calling YAHOO.util.History.navigate, or after the user
        // has trigerred the back/forward button. We cannot discrminate between
        // these two situations.

        // "state" can be "tab0", "tab1" or "tab2".
        // Select the right tab:
        tabView.set("activeIndex", state.substr(3));
    });

    function handleTabViewActiveTabChange (e) {
        var newState, currentState;

        newState = "tab" + this.getTabIndex(e.newValue);

        try {
            currentState = YAHOO.util.History.getCurrentState("tabview");
            // The following test is crucial. Otherwise, we end up circling forever.
            // Indeed, YAHOO.util.History.navigate will call the module onStateChange
            // callback, which will call tabView.set, which will call this handler
            // and it keeps going from here...
            if (newState != currentState) {
                YAHOO.util.History.navigate("tabview", newState);
            }
        } catch (e) {
            tabView.set("activeIndex", newState.substr(3));
        }
    }

    function initTabView () {
        // Instantiate the TabView control...
        tabView = new YAHOO.widget.TabView("demo");
        tabView.addListener("activeTabChange", handleTabViewActiveTabChange);
    }

    // Use the Browser History Manager onReady method to instantiate the TabView widget.
    YAHOO.util.History.onReady(function () {
        var currentState;

        initTabView();

        // This is the tricky part... The onLoad event is fired when the user
        // comes back to the page using the back button. In this case, the
        // actual tab that needs to be selected corresponds to the last tab
        // selected before leaving the page, and not the initially selected tab.
        // This can be retrieved using getCurrentState:
        currentState = YAHOO.util.History.getCurrentState("tabview");
        tabView.set("activeIndex", currentState.substr(3));
    });

    // Initialize the browser history management library.
    try {
        YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
    } catch (e) {
        // The only exception that gets thrown here is when the browser is
        // not supported (Opera, or not A-grade) Degrade gracefully.
        initTabView();
    }

})();

</script>
CommentFileSizeAuthor
deco_tab_error.png14.43 KBraviepic3
Other_theme_working.png11.34 KBraviepic3

Comments

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Project: Drupal core » Deco
Version: 6.14 » 6.x-1.x-dev
Component: javascript » Code
Issue tags: -deco, -yui

Moving to the Deco theme issue queue.

c31ck’s picture

c31ck commented
Category: bug » support
Status: Active » Closed (works as designed)

As you already suggested, this looks like a CSS conflict. I recommend that you use a tool like Firebug to trace down which CSS is getting overridden by Deco. Once you know what CSS is getting overridden you can either remove that CSS from Deco's style.css or add you own CSS to style.css to fix this.

It is normal behaviour that Deco applies its own CSS to lists, so I'm marking this as won't fix.