Skip to content

z-index issue with horizontal fixed menu & input with focus #103

Closed
@dbaq

Description

Hi folks,

I am facing an issue with pure. I have a horizontal fixed menu and a form, when I scroll with a selected input field, the selected input is onto the menu.

You can see what I mean on the following screenshots

screen shot 2013-06-14 at 10 01 24 am
screen shot 2013-06-14 at 10 01 13 am

I am using : http://yui.yahooapis.com/pure/0.2.0/pure-min.css and chrome Version 27.0.1453.110

Here is the code, if you want to reproduce :

 <body>  
            <div class="header pure-u-1">
                <div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal"> 
                    <ul>
                        <li class="pure-menu-selected"><a href="#">Home</a></li>
                        <li><a href="#">Tour</a></li>
                        <li><a href="#">API</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
            </div>

            <div class="content pure-u-1">
                <div class="pure-g-r">
                    <div class="pure-u-2-3"> 

                            <h3>Sign up!</h3>
                            <form class="pure-form">
                                <fieldset class="pure-group">
                                    <input type="text" class="pure-input-1" placeholder="Username">
                                    <input type="text" class="pure-input-1" placeholder="Password">
                                    <input type="email" class="pure-input-1" placeholder="Email">
                                </fieldset>

                                <fieldset class="pure-group">
                                    <input type="text" class="pure-input-1" placeholder="Another Group">
                                    <input type="text" class="pure-input-1" placeholder="More Stuff">
                                </fieldset>
                                <fieldset class="pure-group">
                                    <input type="text" class="pure-input-1" placeholder="Another Group">
                                    <input type="text" class="pure-input-1" placeholder="More Stuff">
                                </fieldset> 
                                <button type="submit" class="pure-button pure-input-1 pure-button-success">Sign up</button>
                            </form> 
                    </div> 
                </div>
            </div>
</body>

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions