Menu icon Foundation
Bug with dropdown

I have a bug with dropdown menus.

Try the script below and look the horizontal scrollbar. The bug disapear after the dropdown box disapear.

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>popol</title>

        <link rel="stylesheet" href="assets/css/app.css" />



        <script src="bower_components/modernizr/modernizr.js"></script>
    </head>
    <body>

            <div class="row">
                <div class="large-12 columns">
                    <ul class="button-group right">
                        <li>
                            <span data-dropdown="hoverdate-list-messages" data-options="is_hover:true">1-15 of 999</span>
                            <ul id="hoverdate-list-messages" class="f-dropdown" data-dropdown-content>
                                <li><a href="#">Newest</a></li>
                                <li><a href="#">Oldest</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="small button">prec</a></li>
                        <li><a href="#" class="small button">next</a></li>
                    </ul>
                </div>
            </div>

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


        <script src="bower_components/jquery/jquery.js"></script>
        <script src="bower_components/foundation/js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>


            

         

To fix the bug I just added

left: -9999px;
            

         

in f-dropdown definition

dropdownmenu

I have a bug with dropdown menus.

Try the script below and look the horizontal scrollbar. The bug disapear after the dropdown box disapear.

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>popol</title>

        <link rel="stylesheet" href="assets/css/app.css" />



        <script src="bower_components/modernizr/modernizr.js"></script>
    </head>
    <body>

            <div class="row">
                <div class="large-12 columns">
                    <ul class="button-group right">
                        <li>
                            <span data-dropdown="hoverdate-list-messages" data-options="is_hover:true">1-15 of 999</span>
                            <ul id="hoverdate-list-messages" class="f-dropdown" data-dropdown-content>
                                <li><a href="#">Newest</a></li>
                                <li><a href="#">Oldest</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="small button">prec</a></li>
                        <li><a href="#" class="small button">next</a></li>
                    </ul>
                </div>
            </div>

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


        <script src="bower_components/jquery/jquery.js"></script>
        <script src="bower_components/foundation/js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>


            

         

To fix the bug I just added

left: -9999px;
            

         

in f-dropdown definition

Mark Hayes over 5 years ago

What browser are you using? Tried this in Chrome (v31.0.1650.63) and Safari (v6.0.5) without any issues.

Laurent P over 5 years ago

Tried with

Chrome 31.0.1650.63 m
Canary Chrome 34.0.1784.0 canary
FF 26.0
IE 10.0.9200.16750

Still buggy with all browsers