CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 6839

Layering CSS blocks clicks

I have a page that looks like this:

enter image description here

The Active "SORT BY..." button and the inactive button next to it, I needed to not scroll when I scrolled through the list below it. To accomplish this I have the two side by side button drops down codded like this:

<!-- Start Drop Down Menu  -->
    <div class="row" style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;">

        <div class="col s6">
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' href='#' data-activates='dropdown1' style="width: 100%;">Sort By...</a>

            <!-- Dropdown Structure -->
            <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">Brewery</a></li>
                <li><a href="#!">Rating</a></li>
                <li><a href="#!">Style</a></li>
            </ul>
        </div>

        <div class="col s6">
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn disabled' href='#' data-activates='dropdown2' style="width: 100%;"></a>

            <!-- Dropdown Structure -->
            <ul id='none' class='dropdown-content'>
                <li><a href="#!">All</a></li>
                <li><a href="#!">Brewery</a></li>
                <li><a href="#!">Rating</a></li>
                <li><a href="#!">Style</a></li>
            </ul>
        </div>


    </div>

As you can see in the Style part of the above code:

style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;"

I position it and place it fixed so it will not move when I scroll the list below. You may be looking at it and wounder why I have the height 300px when the buttons are not that big...Its because when you click the button it opens a drop down. If I have the height the same height as the button then I can see most of the drop down that open....I thought this fixed my issues but this leads to my current issue. Since the button technically drops down 300px it overlaps the first two entries in the list which makes them not clickable.... causeI am clicking on the transparent css that is covering them up.

For the list, I am adding that into this div with this style:

<div style="height: 35px; position: relative; top:60px; z-index:1;">
        <div id="replace"> </div>
    </div>

In short, how can I have the drop down buttons pin to their location and still be viewable when opened and at the same time still be able to click on all my entries in my list?

Upvotes: 1

Views: 169

Answers (1)

coderMe
coderMe

Reputation: 2169

You should not need to set the height of your .row div to 300px. Instead, remove the overflow:hidden style, which is causing your dropdowns to get cut off.

Also, you should be breaking your CSS out into a separate file, to separate style from content.

Finally, I would add that the background should not be transparent - try it, you'll see text scrolling behind the buttons.

.row {
  background: #fff;
  height: 35px;
  width: 100%;
  position: fixed;
  z-index: 10;
}

Upvotes: 2

Related Questions