Solved

select box - odd behaviour when showing options - showing upwards

Posted on 2009-04-15
5
139 Views
Last Modified: 2012-05-06
Hi all,
I have a select box on a page with about 150 options.
When a user goes to select and option the options appear up the way.
thats normally ok, but for some reason the top of the options are displayed outside of the browser window! So its drawing outside the viewport.
pretty odd.

The select is in a div thats absolutely positioned but i changed it to a table and that didnt have any impact either.

Is there any way to specify the direction the options appear so I can force it to appear below?
Of failing that can i reduce the number of results shown at a time in the select boxes options?

Thanks!
o

0
Comment
Question by:osion
  • 3
  • 2
5 Comments
 
LVL 41

Accepted Solution

by:
HonorGod earned 250 total points
ID: 24151923
I don't think so.  Where, on the page, does your select occur?

If the select is on the top half of the page, do the options display down?

Since your list of options is so long, perhaps you could consider some kind of "typeahead" filtering mechanism that would subset the data based upon user input (e.g., as the user types the first few letters, only entries with those letters, in that sequence would continue to be displayed).
0
 

Author Comment

by:osion
ID: 24155557
Hey HonorGod,
Thanks for the reply. Well the select appears in the top third of the page. I thought it would show down the way as theres more room but it seems to always go up. It only happens at 1024 x 768 resolution, but thats the resolution I have to design for.

The typeahead option would work but unfortunately the users have to be able to select an option from the list. We actually imlpemented a type ahead textbox already for another field.

I've just noticed it only happens in IE7 and not in IE6! how odd is that!
O
0
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 250 total points
ID: 24157260
Ah, yet another instance of IE being evil... :-)

I hate those "hard to predict" kind of things.

What kind of entries do you have, might you be able to display, for example, the 1st letter of existing entries, then when the user chooses a letter, that starts the filtering process, and only those entries that start with the specified letter get displayed?

Just a though.
0
 

Author Comment

by:osion
ID: 24157390
Hey,
Yes a lovely little nuance that only arrives once your finished :)

Well I ve found a pretty un technical workaround! I've swapped the location of the box around with another one and low and behold its fine again.

Thank goodness as there doesnt seem to be any way to control it apart from building a drop down with a list instead!
Thanks for the help though!
O
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24157817
Thank you for the grade & points.

Sorry I didn't have a better answer for you.

Good luck & have a great day.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Error in page 3 46
Angular JS Route 3 54
How can I upload multiple images from a HTML form? 2 18
Why my select dropdown does not work? 8 27
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now