Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm using Foundation CSS. But the dropdown select I use as a simple HTML tag.

The problem is that dropdown is not working on small (mobile) windows.

I reproduced the error here http://jsfiddle.net/BZrT8/1/ (in CSS block I added both foundation.css and main.css I use).

I found that the problem is caused by the float:left; property of .row .mobile-three property in foundation.css

Any ideas why float:left; makes the dropdown list not working? And how to fix it?

share|improve this question

1 Answer

up vote 1 down vote accepted

You have a div that overlaps your select on narrow screens:

<div class="seven columns"></div>

You can't see it, cause it doesn't have a content or background. It floats to the right and occupies the space; since it's later in DOM it's over your select.

Remove this div or reposition/refloat it out of your way.

share|improve this answer
Thanks a lot. That fixed the problem! – Volder Jan 1 at 16:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.