CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
sventizzle
sventizzle

Reputation: 37

custom css select menu gets cut off at the bottom in chrome

Here's a link to my page: http://2plygraphics.com/im-here/

I have custom select menus and form elements using the :before and :after pseudo tags. There is also a lot of javascript making things hide/show etc.

If you view the page in Chrome you will notice that on the first click of any select menu in the page, the contents of the menu get cut off at the bottom. Once you have clicked once, all menus work as designed. It also appears to be a compounding issue, in that, if a menu has 11 items it is cut off more than one with 2 items. Once the page is refreshed the issue happens again...

I have tried changing or removing line heights, padding, margins, the overflow method etc. Starting to lose perspective...any help would be appreciated.

OK, here is an image of it in action:
http://i59.tinypic.com/33ljm35.png

I have tested this in windows 7 using Chrome Version 33.0.1750.154 m

Update

Does anyone have any suggestions for working around this? I'm thinking maybe faking a click on one of the select menus to get it to "activate" after the page has loaded...

Upvotes: 1

Views: 1555

Answers (1)

Deku
Deku

Reputation: 46

I had the same problem in Chrome/Win8.1 and i could solve that by removing the font-family setting on the select-element in my css. Without that everything was working like it should.

Upvotes: 3

Related Questions