Reputation: 1537
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:
How can I get the drop down to go over the secondary background section?
Cheers!
Upvotes: 0
Views: 46
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
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