I have a form that populates the country field dynamically using AJAX:
http://interactiveblend.com/ajax/dynamic.html As you can see, this drop down is too long and runs off the bottom of the page.
When I hard code the select list, it looks fine - http://interactiveblend.com/ajax/static.html
Any idea on how to make the dynamic list shorter so the items can be scrolled within the drop down list?
None of the links works.
Since neither link is working, I cannot see what you are talking about. However, my question is what is different about the two rendered select inputs? Does the dynamically-generated select contain more options than the static one or is it simply styled differently in such a way that it takes up more space?
If you surround your select box in a DIV with a fixed height and set the overflow if the drop down becomes too large it will toss in a scroll bar:
<div style="height:60px;overflow:auto;">
<select>
<option>...</option>
</select>
</div>
I believe that answers your question
The select will stil break out of the div if you do that, at least in Chrome: http://jsfiddle.net/dcdruck/R3jag/17/. Even if it did work and prevented the drop down from breaking out of the div, it would awkwardly have two scroll bars (one on the select drop down and one on the div for the overflow).
My appologies I see what the OP is trying to do now. The number of items that display in an actual drop down is determined by the browser taking into account things like screen resolution, etc. My guess without actually seeing the code is that if you're using AJAX to get the data and adding items to the drop down after the DOM has finished loading and the browser is not detecting this as it thinks it's an empty drop down and does not add the scroll bar as it does when you manually code it. If that is indeed what's occuring you have two options that should work. Make your dropdowns so they are coded when the page loads and hide them (more simple but adds to page load time) or use AJAX to load a new dropdown not just add items to an existing one which will be processed and should add the scroll bar for you.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.