Select menus opening vertically

[Falkon303]

Hi everyone,

So when I have a select menu with many options, depending on the position of the page, the menu opens upwards instead of downwards. Does anyone know if there is a css hack for this, or if it's possible to change?

- Ben

[james438]

Could you post a link to the script you are referring to?

[Falkon303]

Thanks for the reply james,

Here's the basic of it -

http://jsfiddle.net/falkon303/m9xfP/

if you click the select menu, it goes upwards based on the position of the page. Hoping there is a css hack to fix it not to.

[coothead]

Hi there Falkon303,

the select "select elemnent" will extend downwards until the browser decides otherwise.

coothead

[jscheuer1]

That's right coothead, and in Chrome, Opera, and Firefox the example given will extend down out over the bottom edge of the window if there's enough screen below it to do so. I just checked, in IE 10 it will do the same, only with a twist - if there isn't enough room it will use the room that there is with however many items won't fit appearing above the position of the select element.

The bottom line though is that no browser will extend all of the items down unless there's room for them on the screen. Nor should they. If they did, items would be off the screen and unseen.

It's not the select's position in the window, it's its position on the user's screen.

If there were an attribute or css that would force it to go down in all circumstances, that would sometimes result in some items not being seen, so it would be best to avoid that anyway.

[coothead]

Hi there John,

I probably did the same tests as you.

I even started my post with the intention of detailing all of my
findings but in the end just decided to write "The bottom line"


coothead

[Falkon303]

Thanks for the reply guys,

Dang. Problem is I have a select menu that has enough space to display the list downwards, but it goes up anyways. Just kind of annoying is all. Perhaps if I can somehow trick the browser through javascript into thinking the position of the select menu is higher on the page. It's not a big deal, but I am sure you all know how it's difficult to leave something not exactly the way you want it.

Thanks,

- Ben

[jscheuer1]

Hmm, it can't be very close to having enough room I would think.

One thing you could try is putting white space after it on the page, like a bunch of:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

just to see what would happen. In fact, if you have enough of those, there should always be room on the page (not the window) for it to drop down. If you also were to scroll the page onmouseover of the select if there weren't enough room, that might take care of it. But the page would lurch sometimes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[Falkon303]

Thanks jscheuer1,

It was overflowing just a tiny bit so I changed the font size. Got it how I want it. More curious if it's possible than anything else.

Best,
- Ben