Material-design-lite: Lower Right Menu not showing properly in Chrome but works perfect in Firefox

[an0nh4x0r]

Here i'm attaching the code of what i was doing
`

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
            mdl-layout--fixed-tabs">
    <header class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top">
        <div class="mdl-layout__header-row">
            <span id="spanshots" class="mdl-layout-title">Spanshots</span>

            <div class="mdl-layout-spacer"></div>

            <!-- Expandable Textfield -->
            <form action="#">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
                        <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" id="sample6">
                        <label class="mdl-textfield__label" for="sample6">Expandable Input</label>
                    </div>
                </div>
            </form>

            <!-- Right aligned menu below button -->
            <button id="demo-menu-lower-right"
                    class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">more_vert</i>
            </button>

            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                for="demo-menu-lower-right">
                <li class="mdl-menu__item">Some Action</li>
                <li class="mdl-menu__item">Another Action</li>
                <li disabled class="mdl-menu__item">Disabled Action</li>
                <li class="mdl-menu__item">Logout</li>
            </ul>
        </div>
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Feed</a>
            <a href="#fixed-tab-2" class="mdl-layout__tab">Trending</a>
            <a href="#fixed-tab-3" class="mdl-layout__tab">Profile</a>
        </div>
    </header>
    <main class="mdl-layout__content">
        <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
            <div class="page-content">
                <!--Feed-->

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="mdl-grid">
                    <div class="mdl-layout-spacer"></div>
                    <div class="loading_spinner mdl-spinner mdl-js-spinner is-active"></div>
                    <div class="mdl-layout-spacer"></div>
                </div>

            </div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-2">
            <div class="page-content">
                <!--Trending-->

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="feed_card mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-layout-spacer"></div>
                    <div class="mdl-card mdl-shadow--2dp">

                    </div>
                    <div class="mdl-layout-spacer"></div>
                </div>

                <div class="mdl-grid">
                    <div class="mdl-layout-spacer"></div>
                    <div class="loading_spinner mdl-spinner mdl-js-spinner is-active"></div>
                    <div class="mdl-layout-spacer"></div>
                </div>

            </div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-3">
            <div class="page-content">
                <!--Profile-->

                <div class="mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-cell--2-col-desktop mdl-cell--3-offset-desktop mdl-cell--2-col-phone">
                        <img id="spanner_profile_pic" src="assets/images/profile_pic.svg" alt=""><br>
                        <span id="spanner_profile_pic--caption">Harsh Bhatia</span>
                    </div>

                    <div class="mdl-cell--7-col-desktop mdl-cell--2-col-phone">
                        <div id="spanner_follower_card" class="mdl-card mdl-shadow--2dp">

                        </div>
                    </div>
                </div>

                <hr id="horizontal_btw_grid_profile_pic">

                <div class="mdl-grid">
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                </div>
                <div class="mdl-grid">
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                </div>
                <div class="mdl-grid">
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                    <div class="mdl-cell--4-col-desktop">
                        <div class="grid mdl-card mdl-shadow--2dp"></div>
                    </div>
                </div>

                <div class="mdl-grid">
                    <div class="mdl-layout-spacer"></div>
                    <div class="loading_spinner mdl-spinner mdl-js-spinner is-active"></div>
                    <div class="mdl-layout-spacer"></div>
                </div>

            </div>
        </section>
    </main>
</div>

`

Dropdown at the top right in the header is only showing the first link in chrome and not others ... while it works perfect in Mozilla firefox

This is screenshot in Firefox

and this screenshot in Chrome

[HarshBhatia]

setting

 .mdl-layout__header--waterfall{
    overflow: visible;
}

Fixes this.

[an0nh4x0r]

Thanks! @HarshBhatia

[Garbee]

This is a duplicate of another issue, can't find it right now but I know it relates to a template we offer. Essentially, we aren't sure where the regression came in which means solving it internally is a low-priority. Especially since the internal team is working on V2.

If someone wants to contribute a patch to fix this without breaking BC to mdl-1.x then that branch is open for PRs.

Thank you.