Member Avatar for wrestler05

I am trying to use a select box to store a list of responses, but I have a limited width of which I can use. I have set a width for the select box, but my responses are longer then the width so they are getting cut off. I would like the responses to then wrap so the entire response can be viewed. I know if I don't set the width the window will stretch to accommodate it, but I don't have the area to do this. Can anybody please help? Even if it means using javascript I would be willing to try it. Thank you

  • 5 Contributors
  • 6 Replies
  • 414 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Summary for : native HTML select/option controls will not reliably wrap long option text across browsers. Selects are rendered by the browser/OS UI, so styling control is limited; some browsers (notably Firefox) accept white-space on options, while WebKit and many versions of IE/Edge ignore it. Because of that inconsistency, the practical solutions are either a fallback that preserves native behavior or a fully custom control that allows wrapped layout.

Relevant thoughts from the thread:

  • : shortening labels helps but may not be possible for fixed-response text.
  • : placing related text outside the select is a workable UI change if the workflow allows it.
  • : showing full text in a separate preview area is a low-effort, accessible fallback that keeps the native select intact.
  • : link suggested additional ideas (see thread).

Practical options (ranked by effort vs. compatibility):

  • Low effort, best cross-browser fallback: keep short labels in the select and display the full response in a nearby read-only area (on focus/change). This preserves keyboard behavior and is trivial to implement and test.
  • Medium effort: show full text as a tooltip/preview on hover or focus. Tooltip behavior on option elements is inconsistent, so show the tooltip from a separate element instead of relying on title.
  • Higher effort, best control: implement a custom dropdown (DOM + CSS + JS) that renders items as normal flow elements so wrapping works everywhere. Follow WAI-ARIA patterns: a focusable trigger, a list with role="listbox" and items role="option", manage aria-selected/aria-activedescendant, and implement Up/Down/Enter/Esc keyboard handling. Test with keyboard and screen readers.

Quick Firefox-only CSS note (not cross-browser):

/* Firefox only: allows wrapping inside options */
select { width: 260px; }
select option { white-space: normal; }

Recommendation: use the preview approach as a robust fallback, and move to a tested ARIA-based custom control only if visual wrapping inside the dropdown is essential across all target browsers.

Recommended Answers

All 6 Replies

Member Avatar for php_noob

Maybe you can show what are the text and it is not needed to be wrapped maybe it just need to be rephrased.

Member Avatar for wrestler05

No even if I rephrase it it would still be pretty long. I have looked into that and it is a good thought, but the responses are as short as they can be.

Member Avatar for MidiMagic

Can you put some text boxes out to the sides, and connect them with key letters (e.g., box D) to the select boxes?

Member Avatar for wrestler05

no the replies have to be in the select box for the user to click on directly. Very good thought though, but the replies have to be in the select box.

Member Avatar for vinoct6

Try this link

Member Avatar for almostbob

would something like this work

<textarea rows='7' cols='35' style='float:right;' id='bigbox'></textarea>
<select id='sel' onchange='document.getElementById("bigbox").innerText=document.getElementById("sel").value'>
<option alt='' value='' disabled>Select</option>
<option value=' this long text1 this is more text and still more this long text1 this is more text and still more this long text1 this is more text and still more'> short text 1 </option>
<option value='this is a long text  test2 this is a long text  test2 this is a long text  test2 this is a long text  test2 this is a long text  test2 this is a long text  test2 '> short text 2 </option>
<option value='this is a test3 this is a long text  testthis is a test3 this is a long text  testthis is a test3 this is a long text  testthis is a test3 this is a long text  testthis is a test3 this is a long text  testthis is a test3 this is a long text  testthis is a test3 this is a long text  test'> short text 3 </option>
<option value='this is a test4 this is a test4 this is a test4 this is a test4 this is a test4 this is a test4 this is a test4 this is a test4 '> short text 4 </option>
<option value=' this is a test5 this is a test5 this is a test5 this is a test5 this is a test5 this is a test5'> short text 5 </option>
<option value='this is a test6 this is a test6 this is a test6 this is a test6 this is a test6 '> short text 6 </option>
</select>
<button type="submit" title="Click To Submit completed form" onclick='return confirm("Are you Sure ? ");' name="submit" value="Send" >Send</button>

Long text in value= could be the full string from the database, short text something like substr($string,20);

Edited by almostbob because: n/a
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.