Using Tabs within Tab isn't working - Material

I want to make use of tabs layout within tabs layout. I am using Material Design lite which has already made classes for tabs therefore I am trying to make use of the same.

The Tab Number 1 - Horizontal Tab is working individually without any problem. The Tab Number 2 - Vertical Tab is working individually without any problem.

Now I tried to use tab number 2 within tab number 1. Tab number one's working remain the same but tab number 2 isn't working.

Please take a look at this Plunker link : https://plnkr.co/edit/LVPexb9akrRR2AoPGEGO?p=preview

Code - HTML

    <!DOCTYPE html>
<html>

<head>
    <link data-require="material-design-lite@1.1.1" data-semver="1.1.1" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link data-require="material-design-lite@1.1.1" data-semver="1.1.1" rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css" />
    <script data-require="material-design-lite@1.1.1" data-semver="1.1.1" src="https://code.getmdl.io/1.1.1/material.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>

    <h4>Combined Tab 2 within Tab 1</h4>
    <div class="mdl-tabs mdl-js-tabs">
        <div class="mdl-tabs__tab-bar">
            <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
            <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
            <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
        </div>
        <div class="mdl-tabs__panel is-active" id="tab1">
            <div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
                <div class="mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-cell mdl-cell--2-col">
                        <div class="mdl-tabs__tab-bar">
                            <a href="#tab1-panel" class="mdl-tabs__tab is-active">
                                <span class="hollow-circle"></span> General
                            </a>
                            <a href="#tab2-panel" class="mdl-tabs__tab">
                                <span class="hollow-circle"></span> Bank
                            </a>
                            <a href="#tab3-panel" class="mdl-tabs__tab">
                                <span class="hollow-circle"></span> Password
                            </a>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--10-col">
                        <div class="mdl-tabs__panel is-active" id="tab1-panel">
                            Content 1
                        </div>
                        <div class="mdl-tabs__panel" id="tab2-panel">
                            Content 2
                        </div>
                        <div class="mdl-tabs__panel" id="tab3-panel">
                            Content 3
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mdl-tabs__panel" id="tab2">
            <p>Second tab's content.</p>
        </div>
        <div class="mdl-tabs__panel" id="tab3">
            <p>Third tab's content.</p>
        </div>
    </div>

    <h4>Tab 1 Individual</h4>
    <div class="mdl-tabs mdl-js-tabs">
        <div class="mdl-tabs__tab-bar">
            <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
            <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
            <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
        </div>
        <div class="mdl-tabs__panel is-active" id="tab1">
            <p>First tab's content.</p>
        </div>
        <div class="mdl-tabs__panel" id="tab2">
            <p>Second tab's content.</p>
        </div>
        <div class="mdl-tabs__panel" id="tab3">
            <p>Third tab's content.</p>
        </div>
    </div>

    <h4>Tab 2 Individual</h4>

    <div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
        <div class="mdl-grid mdl-grid--no-spacing">
            <div class="mdl-cell mdl-cell--2-col">
                <div class="mdl-tabs__tab-bar">
                    <a href="#tab1-panel" class="mdl-tabs__tab is-active">
                        <span class="hollow-circle"></span> General
                    </a>
                    <a href="#tab2-panel" class="mdl-tabs__tab">
                        <span class="hollow-circle"></span> Bank
                    </a>
                    <a href="#tab3-panel" class="mdl-tabs__tab">
                        <span class="hollow-circle"></span> Password
                    </a>
                </div>
            </div>
            <div class="mdl-cell mdl-cell--10-col">
                <div class="mdl-tabs__panel is-active" id="tab1-panel">
                    Content 1
                </div>
                <div class="mdl-tabs__panel" id="tab2-panel">
                    Content 2
                </div>
                <div class="mdl-tabs__panel" id="tab3-panel">
                    Content 3
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Css

/*Vertical Tabs*/
.vertical-mdl-tabs {
    margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-bottom: 35px;
    height: inherit;
    border-bottom: none;
    border-right: 1px solid #d9d9d9;
}

.vertical-mdl-tabs .mdl-tabs__tab {
    width: 100%;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    letter-spacing: 2px;

}

.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
    border-right: 2px solid #EF5350;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    content: inherit;
    height: 0;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
    padding: 0 30px;
}

.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
    text-align: left;
}

回答1:

If I'm guessing right, you have taken the "vertical tab's code" from this article Vertical tabs in Material design lite. I have written that article, and as far as I can understand, your problem is not related to vertical tabs. You will face the same problem if you use horizontal tabs inside horizontal tabs too.

The problem might be occurring due to javscript code of mdl-tabs. Original developers might be using tabs parent container to find each tabs under that container and binding click events to it. That is why creating problem. Unable to understand right now due to minification.

Solution: Instead of binding click event to child tabs under a parent. You need to change the code to find the "Closest" parent tab container based on the tab clicked and modify the child tabs based on the parent tab found.

Might be overwhelming, but that is what I can guess is happening.

回答2:

I notice that nesting tabs is broken in MDL. When you select an inner tab all other tabs are deselected - including the outer tabs, so no tabs are selected on the outer tabs and the inner tabs vanish.

I found that If I add the inner tabs "programatically" using JS then this bug doesn't occur. When you do this you have to remember to upgrade the inner tabs with componentHandler.upgradeElement(myInnerTabs);