user3399101
user3399101

Reputation: 1537

Overlapping background bug?

So, on my web app's home page I have a birthday (mm/dd/yy) select fields however the drop down is being cut off by the next section of the homepage's background.

Here's the relevant CSS styling for the select:

.selectify .option {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 0 none;
    color: #999999;
    cursor: pointer;
    padding: 5px 20px;
}

And an image:

enter image description here

How can I get the drop down to go over the secondary background section?

Cheers!

Upvotes: 0

Views: 46

Answers (2)

Albzi
Albzi

Reputation: 15609

After being given the link:

.banner has a style of overflow:hidden;. This is what is causing it to hide. Delete it from the styles of banner.

Then, you have a class called container middel-class. Change this to just middel-class.

Then put container INSIDE middel-class. eg:

<div class='middel-class'>
  <div class='container'>
    .. <!-- rest of code as normal -->
  </div> <!-- end of container -->
</div> <!-- end of middel-class -->

Also, it's middle, not middel, but it doesn't really matter :P

Upvotes: 1

AlexPrinceton
AlexPrinceton

Reputation: 1203

I cant say for sure without any code example of full place. This bug can be for few reasons

1.) Somewhere on a parent div (where located dropdown) you are using overflow:hidden - try delete it and see what happens

2.) also there is can be wrong z-index directly on the dropdown

Upvotes: 0

Related Questions