Member Avatar for iblend

I have a form that populates the country field dynamically using AJAX:
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 -

Any idea on how to make the dynamic list shorter so the items can be scrolled within the drop down list?

Edited by pritaeas because: Fixed link.
  • 4 Contributors
  • 5 Replies
  • 202 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by GliderPilot

Dani AI

Generated

The dropdown behaving differently when populated by AJAX is almost always a rendering limitation of native <select> controls: the opened options panel is drawn by the browser/OS and its visible height and placement are not reliably controlled by parent elements. That explains the behavior described by , and aligns with ’s observation and ’s Chrome demo showing a wrapper won’t contain the native popup.

A few practical approaches, listed from simplest to most robust:

  • Keep the native control but convert it to a scrollable listbox using the size attribute. This forces an internal scrollbar and is widely supported, but it changes the control from a collapsed dropdown to a permanently expanded list:
<select id="country" name="country" size="8">
  <option value="US">United States</option>
  <!-- more options -->
</select>
  • Replace the native dropdown with a stylable widget (Select2, Chosen, a custom combobox). These render a DOM panel that can be constrained with CSS and support AJAX, filtering and keyboard navigation. Example styling for the widget’s panel:
.dropdown-panel { max-height: 240px; overflow-y: auto; }

When using a widget, ensure the plugin’s refresh/re-render API is called after options are added via AJAX so the UI updates correctly.

  • Reduce the option set shown at once by filtering or incremental loading (typeahead/autocomplete or AJAX paging). For a country list (only ~200 items), pre-rendering the select at page load is often the simplest and most compatible fix.

Quick troubleshooting notes: compare a static file with many options to the AJAX version to confirm browser behavior; check select.options.length and computed styles in DevTools; confirm any custom CSS or JS is not changing appearance/position. The solution chosen should also preserve keyboard/ARIA support when replacing the native control.

Recommended Answers

All 5 Replies

Member Avatar for AleMonteiro

None of the links works.

Member Avatar for dcdruck

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?

Member Avatar for GliderPilot

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

Member Avatar for dcdruck

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).

Member Avatar for GliderPilot

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.

Edited by GliderPilot
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.