Member Avatar for fielding

I have a drop down select menu that has about 700px worth of text in each option and i need the select box to be 300px wide. So i changed the width in the CSS to fit my layout however in IE the actual portion that drops down stays 300px wide which does not allow the user to view the entire option.

Is there a way to control the width of the drop down section?

Thanks!

  • 3 Contributors
  • 4 Replies
  • 359 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fielding

Dani AI

Generated

Short answer and context: ’s symptom (long option text clipped when the select is 300px) is a native-browser limitation — setting the select box width with CSS controls the closed control only; the OS/browser draws the drop-down list and decides its sizing. Showing the CSS (as asked) is a good diagnostic, and is right that a JavaScript-based replacement is the pragmatic path for a reliable fix. See MDN's discussion of customizable/legacy select styling for background. (MDN: Customizable select elements). (developer.mozilla.org)

Why CSS alone fails: many parts of a classic <select> (the picker, the popup list, option rendering) are implemented by the browser/OS and are not reliably targetable with CSS in all engines, so you cannot dependably force the drop-down to widen across platforms (especially older IE/legacy engines). Modern CSS APIs offer new opt-in custom select rendering, but support varies. (MDN: select element / styling notes). (developer.mozilla.org)

Practical options (what to do now): replace the native control with a tested, accessible widget so you control dropdown width and layout — e.g., Select2 (jQuery), Choices (vanilla JS), or jQuery UI selectmenu. These give consistent width, searching, and templating; jQuery UI even exposes hooks for resizing the menu before display. Evaluate keyboard/ARIA behavior when choosing a library. (Select2 docs) (select2.org) (Choices on GitHub). () (jQuery UI selectmenu). (jqueryui.com)

Quick non-plugin workarounds: if you must keep the native select, provide the full text elsewhere (an adjacent readonly field or a small preview that updates on focus/change) or build a small JS tooltip for the highlighted option — do not rely on the option title attribute (tooltip behavior is inconsistent across browsers). Test in the exact IE version you must support, and keep progressive enhancement and keyboard accessibility in mind. (See browser tooltip discussions and compatibility notes.) (stackoverflow.com)

Recommended Answers

All 4 Replies

Member Avatar for almostbob

show the existing css,

Member Avatar for fielding

OK, so it is an HTML select box BTW, i read the title after i posed and relized it looks likei m using a CSS drop down menu but im not. here is the select box code:

<select name="ctl00$pageContent$ddlVariationGroup103" onchange="javascript:setTimeout('__doPostBack(\'ctl00$pageContent$ddlVariationGroup103\',\'\')', 0)" id="ctl00_pageContent_ddlVariationGroup103" class="select">
							<option value="Select Filter Parts">
								Select Filter Parts
							</option><option value="2233" selected="selected">
								2 - Pressure Gauge, 1/4&quot; 81060BU
							</option><option value="2234">
								8 - Manual High Flow Air Relief Valve Assembly 98209804
							</option>
						</select>

Here is the CSS for it, super simple just tells the box to be 300px

.select {
width:300px;
Member Avatar for fielding

Very helpful, THANKS!

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.