1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

In page Tabs not displaying and working

Discussion in 'XenForo Development Discussions' started by Garani, Oct 14, 2013.

  1. Garani

    Garani Active Member

    I have an issue. I have written the templates as shown in several places, but I can't get in page TABS to be working as expected. XenPorta's tabs are working fine, as well as Xenforo's own. It is just mine that are not correctly displayed, like it is shown in this snapshot.
    tabserrors.png

    Has anyone got any idea of what could be wrong?
     
    Last edited: Oct 14, 2013
  2. Chris D

    Chris D XenForo Developer Staff Member

    One issue is you have two <ul tags with the same ID and on the first <ul element you're setting that ID > li as the target. That will no doubt confuse matters.

    Remove the second <ul completely (or comment it out with <xen:comment>) and try again.

    It's also worth noting that the second tab (the second <li element in the first <ul block) has display none set on it. Did you do that?

    EDIT: Just noticed you've used the same ID in several HTML elements. The ID attribute should be completely unique and you shouldn't re-use the same ID on different elements. It's also worth noting that most elements probably don't need an ID. For styling purposes you should use classes.
     
    Last edited: Oct 14, 2013
    Bob likes this.
  3. Garani

    Garani Active Member

    Chris,
    thanks for the reply. Some change, but still it isn't working. This is the template code I have shutoff all CSS, but when the FFXIV node gets rendered, it get a "display:none" style added.

    HTML:
    <div class="section sectionMain">
       
    <ul id="davincidigitalRoster" class="tabs mainTabs Tabs" data-panes="#davincidigitalRoster> li" data-history="on">
    <li>
                    <a href="{$requestPaths.requestUri}#gw2">Guild Wars 2</a>
    </li>
    <li>
                    <a href="{$requestPaths.requestUri}#ffxiv">Final Fantazy XIV</a>
    </li>
    </ul>
    <ul>
    <li id="gw2" class="profileContent">
    <ol class="section memberList">
        <xen:foreach loop="$rosterUserList.gw2" value="$user">
            <xen:include template="member_list_item">
                <xen:set var="$noOverlay">1</xen:set>
            </xen:include>
        </xen:foreach>
    </ol>
    </li>
    <li id="ffxiv" class="profileContent">
    <ol class="section memberList">
        <xen:foreach loop="$rosterUserList.ffxiv" value="$user">
            <xen:include template="member_list_item">
                <xen:set var="$noOverlay">1</xen:set>
            </xen:include>
        </xen:foreach>
    </ol>
    </li>
    </ul>
    </div>    
     
  4. Bob

    Bob Well-Known Member

    you are missing the data pane ID on the 2nd UL tag

    <ul id="davincidigitalRoster">

    also, REMOVE or CHANGE the first UL's ID as it can't be the same as the pane ID
     
  5. Garani

    Garani Active Member

    YES! That was the issues all along! The pane ID put in the first UL! I have been going around that error like a stupid monkey! :)
     
    Bob likes this.

Share This Page